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

Question

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

版本：

反应：18.2.0

反应-dom：18.2.0

笑话：29.3.1

笑话环境-jsdom：29.3.1

ts-笑话：29.0.3

打字稿：4.9.4

console.error 警告：测试中对 ProductPrice 的更新未包含在 act(...) 中。
测试时，导致 React 状态更新的代码应包装到 act(...) 中：

我通过将断言或我的主要渲染方法包装在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?');
});

----------通过下面的测试--------------
注意：我将断言包装起来waitFor(() => ，然后它们通过了，我测试这不是误报，因为好吧...这篇博文启发我在升级到 React 18 后将我的断言包装在 waitFor 中 - https://www.felixmokross.dev/blog/react-18-upgrade#:~:text=Fishing%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 中，但它仍然导致测试失败。因此，我将 waitFor 替换为 act，然后，它开始工作。

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