升级React 18后测试遇act警告及失败，求更优修复方案

问题背景 #

升级React 18.2.0、react-dom 18.2.0及配套Jest测试依赖后，出现大量act警告和测试失败。目前已通过将断言或主渲染方法包裹在await waitFor(() => {})中修复约80个测试，但发现仅waitFor(async () => {})能消除act警告，非async回调的waitFor虽能让测试通过，警告却依然残留，现寻求更高效的修复方式。

更优修复思路 #

• 优先使用React Testing Library异步查询方法：比如findBy*系列（findByRole、findByText等），这类方法本身就是异步实现，内部已封装waitFor和act逻辑，能自动适配React 18的并发更新机制，从根源避免act警告。
  示例对比：

  // 不推荐：手动用waitFor包裹断言
  await waitFor(async () => {
    expect(screen.getByText('操作成功')).toBeInTheDocument();
  });
  
  // 推荐：直接使用findByText
  const successTip = await screen.findByText('操作成功');
  expect(successTip).toBeInTheDocument();
  

• 全局配置测试环境：在Jest的setup文件中添加React 18适配配置，确保测试环境正确处理并发渲染：

  import '@testing-library/jest-dom';
  import { configure } from '@testing-library/react';
  
  // 调整异步工具超时时间，适配组件更新速度
  configure({ asyncUtilTimeout: 1000 });
  

• 排查未处理的异步逻辑：组件中若存在定时器、API请求等异步操作，测试时需正确模拟——比如用jest.useFakeTimers()处理定时器，用Mock函数模拟API请求，避免因异步更新未完成触发act警告。
• 避免过度包裹waitFor：纯同步渲染的组件无需强行用waitFor包裹，仅当存在状态更新、异步操作导致DOM变化时，再使用异步查询或waitFor。

社区情况 #

不少开发者升级React 18后都遇到过类似的act警告问题，核心原因是React 18启用了自动批处理（Automatic Batching），测试环境下需显式处理异步更新时机。React Testing Library官方文档也针对React 18更新了测试指南，明确推荐用异步查询方法替代手动包裹waitFor。

内容的提问来源于stack exchange，提问作者Chris Cunningham