Jest | Enzyme Как ожидать, что любая строка на defaultValue во входных данных

Question

Я новичок во всем тестировании и изучал документацию airbnb / jest, пытаясь выяснить, как сделать этот тест работающим, и в настоящее время ничего не приходит в голову, что он успешно работает.

У меня есть снимок по умолчанию в моем снимке, который равен новой случайно сгенерированной строке при каждом запуске тестов. Мне любопытно, как я могу нацелить этот вход по умолчанию defaultValue и установить, чтобы он ожидал любую строку.

Тест:

expect(toJson(wrapper)).toMatchSnapshot({'[defaultValue]'.expect.any('string')});

Источник:

<input
  ref={this.myInput}
  type="text"
  placeholder=" Enter your name..."
  defaultValue={getFunName()}
/>

Answer 1

Пока вы случайно генерировали данные, изменяющие результат рендеринга, снимки будут ошибочными. Снимки предназначены для проверки того, что что-то изменилось между тестами.

Тесты моментальных снимков - очень полезный инструмент, когда вы хотите убедиться, что ваш пользовательский интерфейс не изменился неожиданно. https://jestjs.io/docs/en/snapshot-testing

Вместо снимка вы можете выборочно проверить свойства визуализируемого компонента.

it('should be super sweet', () => {
  // Render the component
  const wrapper = shallow(<App />)

  // Find a part of it you want to examine
  const input = wrapper.find('input').first()

  // Check that it looks the way you want
  expect(input.prop('type')).toBe('text')
  expect(input.prop('placeholder')).toBe(' Enter your name...')
});

При попытке создать моментальный снимок большого компонента, где внутренние компоненты находятся в мошенническом состоянии, вы можете посмотреть на насмешки над дочерними компонентами (при условии, что они импортированы и не определены встроенными). Если это один большой рендер с большой разметкой, вам следует разобрать его на более крупные компоненты, чтобы сделать его более тестируемым среди многих других причин.

Вложенный компонент

Учитывая компонент, который вы хотите сделать снимок, который имеет непредсказуемые дочерние элементы ...

const getFunName = () => `${Math.random()} name`

const App = () => (
  <div>
    <h1>This component rocks my socks.</h1>
    <div>
      <input defaultValue={getFunName()} />
    </div>
  </div>
)

Переместить дочерний элемент в его собственный компонент.

const UnpredictableChild = () => (
  <div>
    <input defaultValue={getFunName()} />
  </div>
)

const App = () => (
  <div>
    <h1>This component rocks my socks.</h1>
    <UnpredictableChild />
  </div>
)

Затем перейдите в собственный файл.

import UnpredictableChild from './UnpredictableChild'

const App = () => (
  <div>
    <h1>This component rocks my socks.</h1>
    <UnpredictableChild />
  </div>
)