javascript - 无法在 useEffect 挂钩中测试超时功能
问题描述
我正在创建一个延迟加载图像加载器组件,如果图像可见超过 500 毫秒,它将加载图像。
它按预期工作,但我无法编写测试来验证它
我试过 jest.runallTimers, setTimeout 但没有成功。我已经用谷歌搜索了如何在 useEffect 挂钩中使用 settimeout 测试代码,但没有一个对我有用。
我正在分享一个代码框链接,以防有人有兴趣提供帮助。
https://codesandbox.io/s/optimistic-aryabhata-1dtru?file=/__tests__/index.test.js
解决方案
要测试一段时间后呈现的图像,您可以执行以下操作:
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 毫秒后保留了其他所有内容来渲染图像。
这是一个工作沙箱
推荐阅读
- r - 如何在 R 中的另一个函数中使用“sink”函数?
- wicket - 将tomcat 7升级到8后检票口登录不起作用
- javascript - 当从 javascript 文件浏览器中选择的文件加载到浏览器时禁用按钮
- excel - 仅在 Excel 中查找和替换值(不在公式中)
- postgresql - 如何在 postgresql 函数中连接两个字符串?
- apache - htaccess 重定向有线问题
- json - JSON 模式中 $id 的推荐格式
- elasticsearch - 如何微调 Elasticsearch 6.8 中包含最多搜索词的搜索结果?
- python - 训练时改变高斯噪声层的Keras标准偏差
- excel - 查找查询来源的更简单方法?