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

Question

我有一个带有 handleAdd 函数的组件。此函数调用一个库，该库又调用 axios 并返回一个 promise。一旦这个问题得到解决，handleAdd() 方法就会更新组件状态，而组件状态又会呈现 child(ren)。

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

当使用 Jest 进行测试时，我必须在 expect 运行之前等待几毫秒的 sleep ，否则浅渲染还没有更新，即使我模拟/覆盖了 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

只是想把它扔在那里，我使用简单的 setTimeout 和 jest 的 done() 的组合。

编辑

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

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