我正在使用Select component from patternfly并尝试进行一项测试,其中涉及对选择进行更改。我觉得自己陷入了一个两难境地,因为如果我这样做,我可以在没有use act()
消息的情况下通过测试:
await waitFor(() => {
userEvent.click(screen.getByLabelText(labelText));
});
userEvent.click(screen.getAllByRole('option')[optionNumber]);
但是,我随后得到一个lint错误,显示为Avoid using side effects within 'waitFor' callback
如果我删除waitFor()
,并
userEvent.click(screen.getByLabelText(labelText));
userEvent.click(screen.getAllByRole('option')[optionNumber]);
我的测试给予我的控制台错误说Warning: An update to Popper inside a test was not wrapped in act(...).
值得注意的一点是,只有当我使用Select
组件的menuAppendTo
属性将最终成为“Popper”菜单(选项所在的位置)的内容附加到document.body
(或“inline”以外的任何位置)时,才会出现此问题。我必须这样做,以防止一些裁剪问题的菜单是在一个模态。
现在我只是忽略了lint的问题:
await waitFor(() => {
// eslint-disable-next-line testing-library/no-wait-for-side-effects
userEvent.click(screen.getByLabelText(labelText));
});
userEvent.click(screen.getAllByRole('option')[optionNumber]);
我怎样才能同时满足测试和皮棉?
2条答案
按热度按时间j0pj023g1#
我能够通过在单击选项之前在findBy上放置一个等待选项来解决这个问题,如下所示:
62lalag42#
我也遇到了同样的问题,我通过将testing-library/react更新到14.0.0版本来修复这个问题
“@testing-library/react”:“^14.0.0”
有关详细说明,请参阅本文Testing React components that update asynchronously with React Testing Library