测试失败是因为在React Testing Library中没有在findBy之前放置waitFor语句
P粉174151913
P粉174151913 2023-09-09 12:02:38
[React讨论组]

render(view)
let timerCellsList;
await waitFor(() => {
  lockCellsList = screen.getAllByTestId('TimerCell');
  expect(lockCellsList).toHaveLength(2);
});

const startTimerButton = within(timerCellsList[1]).getByRole('button');
userEvent.click(startTimerButton);
await waitFor(() => {}, {timeout: 0}); // 测试通过了,没有这行就失败了。
                                       // 我可以设置超时时间为任意数字,包括0。
const activeTimer = await screen.findByRole('cell', {name: /00:00/i});
expect(activeTimer).toBeInTheDocument();

我写了一个测试,用户点击一个按钮。按钮发送网络请求,如果返回200,则显示一个计时器,开始以秒为单位计数。我使用MSW返回模拟响应。由于网络请求明显是异步的,我通过等待调用screen.findByRole来搜索这个计时器。我遇到的问题是,只有在调用userEvent.click(startTimerButton)和调用await screen.findByRole('cell', {name: /00:00/i})之间调用await waitFor(() => {})时,测试才能通过。似乎只有在搜索计时器之前让它休眠一段时间,这个测试才能通过。我不明白为什么我不能立即开始搜索计时器。

没有waitFor语句,我得到的错误消息是:

错误:抛出:“测试超时超过 5000 毫秒。 如果这是一个长时间运行的测试,请使用 jest.setTimeout(newTimeout) 来增加超时值。” var evt = document.createEvent('事件'); 类型错误:无法读取 null 的属性“createEvent”

有人知道是什么原因吗?我希望不必像现在这样绕过它。

我还尝试将我的await findBy更改为在waitFor语句内部包装的getBy,但也没有起作用。似乎我只需要让它休眠一段时间,然后开始搜索。

P粉174151913
P粉174151913

全部回复(1)
P粉248602298

你在这一行中缺少await

userEvent.click(startTimerButton);

所以尝试一下:

await userEvent.click(startTimerButton);

自版本14起,userEvent API是异步的。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号