ожидаемый (полученный) .toEqual (ожидаемый) - ошибка

Question

Я пытаюсь запустить модульный тест для React JS - используя jest / энзим.

В данный момент тест не пройден. Не совсем уверен, почему, может быть, я не вызываю ожидание (wrapper.find) правильно.Вот часть моего теста:

 File.test.js

   it('renders modal when open flag is true', () => {
 const props = { isOpen: true }; 
 const wrapper = mount(
 <div id="root">
  <Component {...props} />
</div>
);
 wrapper.update();
expect(toJson(wrapper)).toMatchSnapshot();
 expect(wrapper.find('.loa-download-header').exists()).toEqual(true);
expect(wrapper.text()).toContain(' Please enter a password.');
 });
 });

Вот часть файла File.js. В качестве примера показан фрагмент кода, который я пытаюсь протестировать.

 render() {
return (
  <Modal

       <div title="Close Window" className="add-custom-field-close" onClick={() => {this.closeModal()}}><FontAwesome name='xbutton' className='fa-times' /></div>
        </div>
      </div>

      <div className='loa-download-header-wrapper'>
        <div className='loa-download-header'>
          Please enter a password.
          </div>

Ошибка:ожидаемо (получено) .toEqual (ожидаемо)

Expected value to equal:
  true
Received:
  false

Любые исправления в коде будут чрезвычайно полезны

Answer 1

Я потратил некоторое время на интеграцию вашего кода в песочницу.В вашем коде довольно много изменений, которые я перечислил ниже.Я также включил некоторые тесты, которые были заполнены, а некоторые нет.Что вы должны сделать, это потратить некоторое время на ознакомление с этими изменениями, чтобы вы могли заполнить остальные тесты в containers/LOAs/__tests__ самостоятельно .

Несмотря на то, что я написал интегрированный тест для контейнера LOAs, я рекомендую вам написать модульный тест для меньшего components, чтобы вы могли попрактиковаться в имитации функций prop, проверяя, 'вызывается, и убедитесь, что компонент функционирует как ожидалось.Несмотря на то, что он будет избыточным, он поможет вам понять процесс, что тестировать и как тестировать (для модульных тестов вы захотите использовать shallowWrap вместо функции mountWrap - илине используйте их и используйте функции shallow и mount, предлагаемые enzyme ... до вас).

Рабочий пример : https://codesandbox.io/s/p3ro0615nm

Изменения :

• Создан контейнер компонент, который обрабатывает все UI и state изменения
• Используется this.setState() обратные вызовы для обеспечения синхронности state и вспомогательных действий.Не менее важно, что это также уменьшает мерцание нежелательных компонентов.
• Используется условный рендеринг с использованием троичного оператора
• Используется lodash *Функции 1045 * filter, map и isEmpty (они удобны, и я предпочитаю их по сравнению с нативными функциями JS)
• Поддельные 2 вызова API (заметил, что я использовал setTimeout, поскольку это будет влиять на ваши тесты).В функции fakeAPI.post я добавил поддельный пароль для проверки, поэтому предоставленный пароль должен быть 12345 !
• Добавлена ​​возможность выбирать и отменять выбор LOA.При желании вы можете упростить все это с помощью флажков.
• Класс methods начинается с handle, тогда как переданные методы начинаются с on.
• Разбивается components/LOAModal/LOAModal.js наКомпоненты меньшего размера / многократного использования для удобства чтения
• Добавлена ​​проверка PropType для проверки согласованности реквизитов во время первоначального объявления и для всех компонентов.

Примечания :

• Основной частью тестирования является понимание того, что происходит за кулисами, поэтому найдите время, чтобы прочитать документацию ;и, если необходимо, выполняйте меньшие / более простые проекты, чтобы лучше узнать, как работает React.
• При тестировании, если вам нужно увидеть DOM так, как enzyme его видит, тогда вы можете console.log(wrapper.debug());внутри вашего it теста.
• Вы можете использовать jest.useFakeTimers() в функции beforeEach() и jest.runAllTimers() в функции afterEach() для имитации функций setTimeout без необходимости ждать в реальном времениpass.
• Очень важно : всегда включать .catch() после Promise (вызов API).Если вы не catch свои Обещания, то это может привести к сбою вашего приложения.