reactjs - 在 Jest 中测试 React Component 时，我如何才能等到再次收到 Prop ？

Question

我需要测试一个 HOC，它获取数据并将其传递给包装组件。

它在异步获取数据时分几步传递 props。

第一波 Prop 包含 loading ，我设法测试了

第二波 Prop 包含数据 Prop ，但我不知道要等到它到达。我需要某种 eventuallyHasProps 东西..

我正在使用 Jest，react-test-renderer。

有什么方法可以避免设置手动超时？

谢谢

it(
  "first fetch results should be discarded",
  () => {
    // jest.useFakeTimers();

    const fetchMock = jest
      .fn()
      .mockImplementationOnce(() => {
        return new Promise(resolve => setTimeout(resolve(reqSuccess("slow")), 1000));
      })
      .mockImplementationOnce(() => {
        return new Promise(resolve => setTimeout(resolve(reqSuccess("fast")), 100));
      });

    const options = {
      url: props => `http://test.com${props.testArg}`,
      fetchApi: fetchMock
    };

    const WithFetch = withFetch(options)(component);

    // first request
    const testRenderer = renderer.create(<WithFetch />);

    // second request
    testRenderer.update(<WithFetch testArg="test" />);

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const resultTree = testRenderer.toTree();
        resolve(expect(resultTree.rendered.props.data.data.result).toBe("fast"));
      }, 4000);
    });

    // jest.runAllTimers();
  },
  5000
);

Answer 1

两个选项，使用异步测试:

it("should receive data prop", async () => {
  const someresult = await <Promise call>     
  const secondresult = await <Promise call>     
  expect(someresult).toHaveBeenCalledWith(something);
});

或者返回一个 promise :

it("should receive data prop", () => {
  return new Promise(resolve=> {
       // Your assertions (don't forget to call resolve)
  })
});