reactjs 升级到React 18 -测试失败-现在必须在“await waitFor()”中 Package 许多测试Assert

xfb7svmp  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(160)

因此,我更新到React18,现在我得到了吨的行为警告以及失败的测试。
版本:
React:18.2.0
React域:18.2.0
笑话:29.3.1
jest-环境-jsdom:29.3.1
测试用例:29.0.3
typescript :4.9.4
错误警告:测试内ProductPrice的更新未 Package 在act(...)中。
测试时,应将导致React状态更新的代码 Package 到act(...)中:
我已经修复了大约80个测试,方法是将Assert或主呈现方法 Package 在await waitFor(() => {}中。
是否有更好的方法来修复这些测试?下面是一个示例测试,它通过以下更改从失败变为通过......在我升级到React 18和相应的react-testing-library + jest版本之前,以下失败的测试通过了

  • -----------未通过以下测试------------
async function findPlpHeaderText() {
  return screen.findByTestId('plp__header-text');
}

test.only('Sold out products render as expected on store', async () => {
    await renderPage({ route: '/boutique/21443255', siteName: 'anonymous-store' });
    const headerText = await findPlpHeaderText();

    await within(headerText).findByText('Childless boutique');
    await screen.findByText('Sold Out');
    await screen.findByText('Sold Out. Must Have It?');
});
  • --------通过以下测试------------
    注意:我把Assert Package 在waitFor(() =>中,然后它们通过了,我测试了这也不是一个误报...这篇博客文章启发我在升级到react 18之后把Assert Package 在waitFor中--https://www. felixmokross. dev/blog/react-18-upgrade #:~:text = Fixing%20the%20tests,wrap%20assertions%20in
test.only('Sold out products render as expected on store', async () => {
    await renderPage({ route: '/boutique/21443255', siteName: 'anonymouse-store' });
    const headerText = await findPlpHeaderText();

    await waitFor(async () => {
      within(headerText).getByText('Childless boutique');
      screen.getByText('Sold Out');
      screen.getByText('Sold Out. Must Have It?');
    });
});

有没有其他人在升级到React 18后经历过这种情况?如果有更好的解决方案,我很想知道!
另一个奇怪的方面是当我用一个:waitFor(async () => {})回调,act()警告消失--但是如果我只将它们 Package 在waitFor(() => {})非异步回调中,'act()警告仍然存在,但是测试仍然通过...

hs1ihplo

hs1ihplo1#

在升级到react 18之后,我还面临react测试库测试失败的问题。我可以通过在act函数中使用RTL fireEvent封装事件触发来修复大多数测试。其中一些已经被封装在waitFor中,但仍然会导致测试失败。因此,我用act替换waitFor,然后,它开始工作。
或者,如果您使用的是RTL,并且您要在fireEvent之后立即从渲染的dom中获取一些元素,那么不要使用getBy*,而是尝试使用await findBy*。

相关问题