Question

我有一个带有handleAdd函数的组件。该函数调用一个库，该库又调用axios并返回一个Promise。解决该问题后，handleAdd()方法将更新组件状态，这将依次渲染子级。

换句话说，它会先与服务器核对以确保在本地显示该项目之前已添加该项目。

使用Jest测试时，我必须等待几毫秒，然后才能运行期望值，否则即使我模拟/覆盖api调用，浅渲染也不会更新。在promise解析，rerender和expect（）之间有一些延迟。就是这样的样子：

it('adds a thing', async () => {
    ThingManager.default.addPlan = () => {
      const response = new Promise((resolve, reject) => { resolve() })
      return response;
    }

    const wrapper = shallow(<Home />)
    wrapper.find('button').simulate('click')
    const input = wrapper.find('#plan-title')
    input.simulate('change', { target: { value: 'TEST ITEM' } })

    await sleep(500) // without it, <Thing /> isn't rendered yet.

    expect(wrapper.find('Thing').length).toBe(1)
  });

这样做的正确方法是什么？

Answer 1

您可以使用test-utils中的act。这就是React文档的建议，但是我在testing-library中使用waitFor取得了更大的成功。

Answer 2

我只是想把它扔出去，我将简单的setTimeout与玩笑的done()结合使用。

在用Jest测试之前，等待React组件状态更新

2 个答案: