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

Posted 2023-02-22

【中文标题】无法在 useEffect 挂钩中测试超时功能

【英文标题】：unable to test timeout function within useEffect hook

【发布时间】：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

【参考方案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);

);