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

Question

我有一个具有功能的组件handleAdd。该函数调用一个库，该库又调用axios并返回一个承诺。一旦解决了，该handleAdd()方法就会更新组件状态，进而渲染子组件。

换句话说，它首先检查服务器以确保在本地显示该项目之前已添加该项目。

使用 Jest 进行测试时，我必须在 Expect 运行之前等待睡眠几毫秒，否则即使我模拟/覆盖 api 调用，浅层渲染尚未更新。在 Promise 解析、重新渲染和 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

您可以使用act来自test-utils. 这是 React 文档的建议，但我在waitForfrom 方面取得了更多成功testing-library。

Answer 2

只是想把它扔出去，我使用 simplesetTimeout与 jest 的组合done()。

编辑

it('sample test case', (done) => {
        // initialize your component

        setTimeout(function () {
            // expect something that's available after the timeout
            done();
        }, 500);
    });