React Native Testing Library 测试环境配置问题解析

问题背景

在使用 React Native Testing Library 进行单元测试时，开发者可能会遇到一个常见错误："Jest encountered an unexpected token"，具体表现为无法解析 react-native 模块中的 import 语句。这个错误通常发生在测试环境配置不完整的情况下。

错误现象

当运行测试时，控制台会显示如下错误信息：

SyntaxError: Cannot use import statement outside a module

错误指向 react-native 模块中的 import 语句无法被正确解析。

根本原因

这个问题的核心在于 Jest 测试运行器没有正确配置来处理 React Native 的模块系统。React Native 使用了一些特殊的 JavaScript 语法和模块导入方式，而 Jest 默认配置无法处理这些特殊情况。

解决方案

1. 正确的 Jest 配置

在 jest.config.ts 文件中需要添加以下关键配置：

import type {Config} from 'jest';

const config: Config = {
  preset: '@testing-library/react-native',
  setupFilesAfterEnv: ['./jest-setup.ts'],
  transformIgnorePatterns: ['/node_modules/(?!(@react-native|react-native)/).*/'],
};

export default config;

其中最重要的部分是 transformIgnorePatterns 配置项，它告诉 Jest 不要忽略 react-native 相关模块的转换。

2. 配置文件命名规范

确保 Jest 配置文件的命名正确，应该是 jest.config.ts 而不是其他变体。Jest 对配置文件的命名有特定要求，错误的文件名可能导致配置不被加载。

3. Babel 配置

确保项目中有正确的 Babel 配置，通常 react-native 项目需要以下 babel.config.js：

module.exports = {
  presets: ["module:@react-native/babel-preset", "@babel/preset-typescript"]
};

4. 测试初始化文件

建议创建一个 jest-setup.ts 文件来初始化测试环境：

import '@testing-library/react-native/extend-expect';
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

最佳实践

1. 对于新项目，建议使用 react-native init 命令初始化项目，它会自动配置好测试环境
2. 定期检查 React Native Testing Library 的示例项目，了解最新的配置方式
3. 保持相关依赖版本的一致性，特别是 react-native 和 @testing-library/react-native 的版本兼容性
4. 考虑使用 TypeScript 进行测试代码编写，以获得更好的类型支持和开发体验

总结

React Native 测试环境的配置需要特别注意 Jest 的转换规则和模块处理方式。通过正确配置 transformIgnorePatterns 和使用标准的配置文件命名，可以解决大多数测试环境初始化问题。对于复杂的项目，建议参考官方示例项目来确保配置的正确性。