javascript - 在使用 Enzyme 和 Jest 更新(重新渲染)组件之前，我如何返回 "wait"？

Question

我有一个执行以下操作的父组件:

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() 之前没有更新的问题。检查它。

有没有一种干净的方法可以在不使用 setTimeout 的情况下在 React 树上“等待”重新渲染？ ？

我以为wrapper.update()会这样做，但它似乎没有。

谢谢!

Answer 1

有一种方法可以等待所有的 promise 都 resolve。定义:

const waitForPromises = () => new Promise(setImmediate);

然后，在组件渲染完成后，等待:

await waitForPromises()

虽然这在大多数情况下有效，但如果组件在内部更新其状态，而不从其属性触发这些状态更新，则仍然无效。

我相信如果是后者，这只是一种不可测试的模式，需要改变应用程序设计方法，而不是测试方法。