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

我正在创建一个lazyload图像加载程序组件，如果图像在500毫秒以上可见，它将加载图像

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

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

我正在共享一个codesandbox链接，以防有人有兴趣提供帮助

---

试试jest的

done（）

：

---

要测试一段时间后渲染的图像，可以执行以下操作：

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();
});

it（“显示加载，然后渲染图像”），异步（完成）=>{
render（）；
expect（wait screen.findByTestId（“fallbackText”）.toBeInTheDocument（）；
期待(
wait screen.findByTestId（“image”，{}，{timeout:500}）
).toBeInTheDocument（）；
完成（）；
});

您的自定义挂钩有问题（导致测试失败），因此我将其从组件中删除，但将其他所有内容都留给500毫秒后渲染图像

---

这里有一个工作

在hook中使用window对象似乎是问题所在，在用一些具体的值替换它之后，测试通过了，没有任何问题。

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();
});