升级到 React 18 - 测试失败 - 现在必须将许多测试断言包装在“await waitFor()”中

Question

所以我更新到了 React 18，现在我收到了大量的行为警告以及失败的测试。

版本：

反应：18.2.0

react-dom：18.2.0

开玩笑：29.3.1

jest-环境-jsdom：29.3.1

ts-笑话：29.0.3

打字稿：4.9.4

控制台错误 警告：测试中对 ProductPrice 的更新未包含在 act(...) 中。
测试时，导致 React 状态更新的代码应该包装在 act(...) 中：

我通过将断言或我的主要渲染方法包装在

await waitFor(() => {}

中修复了大约 80 个测试。

我应该有更好的方法来修复这些测试吗？ 这是一个示例测试，通过以下更改从失败变为通过...... 在我升级到 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?');
});

----------通过以下测试----------------
注意：我将断言包装在

waitFor(() => 

中，然后它们通过了，我测试了这也不是误报...这篇博文启发我在升级到 React 18 后将我的断言包装在 waitFor 中 -- https ://www.felixmokross.dev/blog/react-18-upgrade#:~:text=修复%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()

警告消失——但是，如果我只将它们包装在

waitFor(() => {})

非异步回调中，`act()警告仍然存在，但是测试仍然通过...

Answer 1

升级到 React 18 后，我还面临着 React 测试库测试失败的问题。我可以通过将 RTL fireEvent 触发的事件包装在 act 函数中来修复大多数测试。其中一些已经包装在 waitFor 中，但它仍然导致测试失败。所以，我用 act 代替了 waitFor，然后，它开始工作了。

或者，如果您使用 RTL，并且在 fireEvent 之后立即从渲染的 dom 获取一些元素，那么不要使用 getBy*，而是尝试使用 wait findBy*。它还可以解决失败的测试。

Answer 2

我找不到这个问题的根本原因，但我能够用像你一样的方法解决它。但是，您可以使用

findBy*

查询，而不是像 Kent C. Dodds 在

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library# 中建议的那样，使用 

getBy*

 包装 

waitFor() 查询。使用等待来等待可以通过查找查询的元素：

建议：任何时候你想要查询可能存在的内容时，请使用 find* 无法立即使用。

编辑： 使用上述方法，一些测试在 CI 中不断随机失败。我能够通过使用

--runInBand

Jest CLI 选项（即

jest --runInBand

）运行测试来修复它。不幸的是，我找不到任何好的解释为什么它有效。