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

问题背景

在使用React Testing Library进行组件测试时，开发者可能会遇到"React.act is not a function"的错误提示。这个问题通常出现在测试环境中，特别是当测试代码尝试使用React的act函数来包裹状态更新时。

错误现象

测试代码中使用了renderHook来测试自定义Hook，并通过act函数来模拟用户交互。在本地开发环境中测试正常通过，但在CI环境中却报错"React.act is not a function"，同时伴随一个关于ReactDOMTestUtils.act已弃用的警告信息。

根本原因

经过排查，发现问题的根源在于CI环境中设置了NODE_ENV='production'。在React的生产模式下，某些测试相关的API会被移除或行为不同，导致act函数不可用。

技术原理

React的act函数是专门为测试设计的工具，它能够确保在测试中正确地处理React组件的更新和副作用。在开发模式下，React会包含完整的测试工具集，而在生产构建中，这些测试专用的API会被移除以减小包体积。

解决方案

1. 确保测试环境变量正确：在运行测试时，确保NODE_ENV设置为'test'或'development'，而不是'production'。

2. 检查测试配置：在CI配置中，确认测试命令不会意外地设置生产环境变量。例如，在package.json中：

"test": "NODE_ENV=test vitest run"

3. 版本兼容性检查：虽然这个问题主要是环境变量导致的，但也应该确保React、React Testing Library和测试框架(vitest)的版本兼容。

最佳实践

• 在测试配置中明确设置环境变量
• 考虑使用cross-env等工具来跨平台设置环境变量
• 对于自定义Hook的测试，确保使用@testing-library/react-hooks提供的renderHook和act函数

总结

React Testing Library测试中出现"React.act is not a function"错误时，首先应该检查环境变量设置。这个问题很好地展示了React在不同环境下的行为差异，也提醒我们在测试配置中需要特别注意环境变量的影响。通过正确配置测试环境，可以确保测试工具API的可用性，从而编写出更可靠的测试用例。