React Testing Library 中 React.act 报错问题解析

在使用 React Testing Library 进行组件测试时，开发者可能会遇到 React.act is not a function 的错误提示。这个问题通常与环境配置或 React 版本相关，值得深入探讨其成因和解决方案。

问题现象

在测试用例中，当尝试使用 act 包裹状态更新操作时，测试框架抛出错误提示 React.act is not a function。同时伴随一个警告信息，提示 ReactDOMTestUtils.act 已被弃用，建议从 react 包而非 react-dom/test-utils 导入 act。

根本原因

经过分析，这类问题通常由以下因素导致：

1. 生产环境配置：当 NODE_ENV 被设置为 production 时，React 会启用生产模式，其中某些测试工具相关的 API 可能被优化掉或表现不同。

2. 版本不匹配：React 核心库与测试工具库版本不兼容，特别是 React 18+ 版本对测试工具做了较大调整。

3. 导入路径错误：从错误的包路径导入 act 方法，如从 react-dom/test-utils 而非 react 导入。

解决方案

环境变量配置

确保测试运行时 NODE_ENV 不被设置为 production。可以通过以下方式检查：

// 在测试配置文件中
process.env.NODE_ENV = 'test' // 确保不是 production

正确的导入方式

使用 React 18+ 时，应从 react 包而非其他路径导入 act：

import { act } from 'react'

版本兼容性

确保安装的 React Testing Library 版本与 React 版本匹配：

• React 18+ 应使用 @testing-library/react 13+
• 较旧的 React 版本使用对应的旧版测试工具

最佳实践

1. 统一测试环境：在 CI 和本地开发环境使用相同的 Node.js 和依赖版本。

2. 显式导入：明确指定 act 的导入来源，避免隐式依赖。

3. 版本锁定：使用 package-lock.json 或 yarn.lock 确保依赖版本一致。

4. 环境检查：在测试启动时检查环境变量配置。

总结

React 测试中的 act 相关问题往往源于环境配置不当或版本不匹配。通过确保正确的导入路径、统一的环境配置以及版本兼容性，可以有效避免这类问题。对于现代 React 应用，从 react 包直接导入 act 是最佳实践，同时注意保持测试环境与开发环境的一致性。

理解这些底层原理不仅有助于解决当前问题，也能帮助开发者在未来遇到类似问题时快速定位原因。测试工具的稳定运行是保证前端应用质量的重要基础，值得投入时间进行正确配置。