React 18升级后react-testing-library测试失败问题咨询

一、React 18 渲染机制的核心变化及测试适配要点 #

• 自动批处理（Automatic Batching）：React 18 默认对所有异步操作（包括 API 回调、定时器回调）内的状态更新进行批处理，这和 React 17 仅批处理同步更新的逻辑不同。测试环境中，若未正确模拟该行为，会导致状态更新后的渲染时机偏差。解决方案：确保使用 @testing-library/react@13+（已原生支持 React 18 批处理），或在异步状态更新逻辑外层包裹 act()。
• Strict Mode 双重渲染：React 18 的 Strict Mode 在测试环境下会触发组件两次渲染，用于检测未清理的副作用。若组件存在未正确销毁的订阅、重复初始化的状态，会导致测试中状态混乱。解决方案：检查组件内 useEffect 的清理逻辑，确保副作用能被正确销毁；若测试无需 Strict Mode，可临时关闭，或调整测试逻辑适配双重渲染场景。
• 并发渲染调度逻辑：尽管测试环境默认不启用并发渲染，但 React 18 调整了渲染调度优先级，部分异步查询的等待逻辑可能受影响。需确保测试中使用 findBy* 系列异步查询（而非 getBy*），并给足等待时间。

二、其他常见失败原因及修复 #

• Mock 与状态更新的时序问题：即使通过 waitFor 确认 API 已调用，React 18 的批处理可能将状态更新延迟到微任务队列执行，此时 findByText 可能在状态更新前发起查询。可在确认 API 调用后，添加 await Promise.resolve() 等待微任务完成，再执行文本查询。
• User Event API 版本不兼容：@testing-library/user-event@14+ 重构了 API，旧版的直接调用（如 userEvent.click）不再符合 React 18 的事件处理逻辑。需切换为新版 API：

  // 旧写法
  userEvent.click(submitBtn);
  // 新写法
  const user = userEvent.setup();
  await user.click(submitBtn);
  

• Jest 环境配置未更新：React 18 要求 Jest 使用最新版 jsdom 环境，确保 jest.config.js 中 testEnvironment 设为 jsdom，且 jsdom 包版本在 v19+ 以上。
• 全局状态残留：若使用 Redux、Context 等全局状态管理，React 18 的渲染机制可能加剧测试间的状态污染。需在每个测试用例执行前重置全局状态。

内容的提问来源于stack exchange，提问作者L Becker