Как мне «подождать», пока компонент не обновится (повторно отрендерится) с помощью Enzyme и Jest? - PullRequest
Новая
       84

Как мне «подождать», пока компонент не обновится (повторно отрендерится) с помощью Enzyme и Jest?

0 голосов
/ 13 июля 2020

У меня есть родительский компонент, который выполняет следующие действия:

  1. Создает форму с различными input полями
  2. При нажатии кнопки отправки выполняется запрос POST с данные <form> передаются на сервер с использованием axios
  3. Если возвращается ответ Error, сообщение об ошибке отображается внутри элемента <span> в форме

Я пишу следующий тест для этого сценария 

import axios from 'axios';
import { expect } from 'chai';
import { mount } from 'enzyme';

jest.mock('axios');

it('displays an error when the submit fails', async () => {
  const wrapper = mount(<MyComponent />);

  // Fill in form input fields with text (not shown)
  // ....
  // ....

  // Mock the axios `POST` call to return an error
  const errorResponse = { response: { data: { errors: [{ title: 'Some error' }] } } }
  axios.post.mockImplementationOnce(() => Promise.reject(errorResponse));

  // Click Submit and wait on the axios Promise to complete
  const submit = wrapper.find('.my-component__submit-btn').first();
  await submit.simulate('click');

  // Check if error was rendered on the form
  wrapper.update();
  const error = wrapper.find('.my-component__submit-error').first();
  expect(error).to.have.text('Some error'); // This fails!
});

Последний expect() завершается неудачно - ошибка не устанавливается, но я ожидаю, что она будет существовать.

Однако, если я добавлю искусственная задержка через setTimeout, проходит. Совершенно очевидно, что проблема заключается в том, что дерево компонентов React не обновляется до того, как его проверит expect().

Есть ли чистый способ «подождать» повторного рендеринга дерева React без использования setTimeout?

Я думал, что wrapper.update() сделает это, но похоже, что это не так.

Спасибо!

...