无法在 useEffect 挂钩中测试超时功能答案

【问题标题】：unable to test timeout function within useEffect hook无法在 useEffect 挂钩中测试超时功能
【发布时间】：2021-04-07 20:12:28
【问题描述】：

我正在创建一个延迟加载图像加载器组件，如果图像可见超过 500 毫秒，它将加载图像。

它按预期工作，但我无法编写测试来验证它

我试过 jest.runallTimers，setTimeout 但没有成功。我在 Google 上搜索了如何在 useEffect 挂钩中使用 settimeout 测试代码，但没有一个对我有用。

我正在分享一个代码框链接，以防有人有兴趣提供帮助。

https://codesandbox.io/s/optimistic-aryabhata-1dtru?file=/__tests__/index.test.js

【问题讨论】：

标签： javascript reactjs unit-testing jestjs next.js

【解决方案1】：

要测试一段时间后呈现的图像，您可以这样做：

it("shows Loading and then renders the image", async (done) => {
  render(<LazyloadImage />);

  expect(await screen.findByTestId("fallbackText")).toBeInTheDocument();

  expect(
    await screen.findByTestId("image", {}, { timeout: 500 })
  ).toBeInTheDocument();

  done();
});

你的自定义钩子有问题（导致测试失败），所以我从组件中删除了它，但让其他所有东西在 500 毫秒后渲染图像。

这是一个有效的sandbox

【讨论】：

似乎在钩子中使用窗口对象是用一些具体值替换它后的问题，测试通过没有任何问题。

【解决方案2】：

试试开玩笑的done():

it('your async test case', (done) => {

    setTimeout(() => {
        // your expect statement
        done();
    }, 1000);

});

【讨论】：