javascript - 无法在 useEffect Hook 中测试超时功能

Question

我正在创建一个延迟加载图像加载器组件，如果图像可见超过 500 毫秒，它将加载图像。
它按预期工作，但我无法编写测试来验证它
我试过 jest.runallTimers, setTimeout 但没有成功。我已经用谷歌搜索了如何在 useEffect Hook 中使用 settimeout 测试代码，但没有一个对我有用。
我正在分享一个代码框链接，以防有人有兴趣提供帮助。
https://codesandbox.io/s/optimistic-aryabhata-1dtru?file=/__tests__/index.test.js

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

您的自定义钩子(Hook)有问题(导致测试失败)，因此我将其从组件中删除，但保留其他所有内容以在 500 毫秒后渲染图像。
这是一个有效的 sandbox