Jest.js 如何避免在子组件更改时使用act()?

oug3syen  于 2023-09-28  发布在  Jest
关注(0)|答案(2)|浏览(159)

我正在使用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]);

我怎样才能同时满足测试和皮棉?

j0pj023g

j0pj023g1#

我能够通过在单击选项之前在findBy上放置一个等待选项来解决这个问题,如下所示:

userEvent.click(screen.getByLabelText(labelText));
const options = await screen.findAllByRole('option');
userEvent.click(options[optionNumber]);
62lalag4

62lalag42#

我也遇到了同样的问题,我通过将testing-library/react更新到14.0.0版本来修复这个问题
“@testing-library/react”:“^14.0.0”
有关详细说明,请参阅本文Testing React components that update asynchronously with React Testing Library

相关问题