React Native Testing Library 常见问题排查指南

前言

React Native Testing Library 是 React Native 生态中广受欢迎的测试工具库，但在实际使用过程中，开发者可能会遇到各种问题。本文将针对常见问题进行深入解析，并提供解决方案，帮助开发者更高效地使用该测试库。

核心依赖版本匹配问题

问题描述

React Native 生态中，React、React Native 和 React Test Renderer 三个核心库的版本必须严格匹配，否则会导致测试失败。

解决方案

1. 版本匹配原则：

   • React Native 和 React 的版本需要对应
   • React Test Renderer 通常应与 React 保持相同的主版本和次版本号

2. 检查工具：

   • 对于纯 React Native 项目，可以使用 React Native 升级助手工具查看版本对应关系
   • 对于 Expo 项目，运行 npx expo install --fix 自动检查和安装兼容版本

3. 常见错误提示：

   • TypeError: Cannot read property 'current' of undefined 当调用 render() 时
   • TypeError: Cannot read property 'isBatchingLegacy' of undefined 当调用 render() 时

组件未定义错误

问题现象

出现类似警告：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

原因分析

这通常发生在错误地模拟(mock)复杂模块时，例如：

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: jest.fn(),
  };
});

上述模拟只模拟了 useNavigation 钩子，但会导致同一包中的其他导出变为 undefined。

解决方案

1. 正确模拟部分模块：

   jest.mock('@react-navigation/native', () => {
     return {
       ...jest.requireActual('@react-navigation/native'),
       useNavigation: jest.fn(),
     };
   });
   

2. 替代方案：

   • 使用 jest.spyOn 选择性模拟包导出

特殊案例：模拟 React Native

对于 react-native 包的模拟，不建议一次性模拟整个包，而应该模拟特定的库路径：

// jest-setup.ts
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');

Act 警告问题

问题分类

1. 同步 act 警告：

   Warning: An update to Component inside a test was not wrapped in act(...)
   

2. 异步 act 警告：

   Warning: You called act(async () => ...) without await
   

处理建议

1. 同步 act 警告：

   • 通常表明测试存在问题，需要调查原因
   • 可能是状态更新没有正确包裹在 act 中

2. 异步 act 警告：

   • 在组件包含异步逻辑时可能出现
   • 目前看来不会影响测试的正确性
   • 可以暂时忽略，但建议关注后续版本更新

最佳实践参考

项目维护者提供了一个示例仓库，展示了现代 React Native Testing Library 的设置，包括：

• TypeScript 配置
• 测试环境搭建
• 常见测试模式

当遇到配置问题时，可以参考该示例仓库中的推荐配置。

总结

React Native Testing Library 虽然强大，但在使用过程中需要注意版本兼容性和正确的模拟方式。通过本文的解决方案，开发者可以避免大多数常见问题，提高测试效率和可靠性。记住，良好的测试实践是开发高质量应用的重要保障。