React Native Testing Library 中解决 Jest 测试的 ES6 模块解析问题

在 React Native 项目中使用 Jest 进行单元测试时，开发人员经常会遇到 "Unexpected token 'export'" 的错误。这个问题通常出现在测试环境尝试解析包含 ES6 模块语法的第三方依赖时。本文将深入分析这个常见问题的原因，并提供完整的解决方案。

问题根源分析

当 Jest 运行测试时，它会通过 Babel 将代码转换为 Jest 能够理解的格式。错误的核心在于 Jest 的转换配置未能正确处理某些依赖中的 ES6 模块语法。这通常由以下几个因素导致：

1. Babel 配置不完整或冲突
2. Jest 的 transformIgnorePatterns 设置不当
3. 预设(preset)之间的兼容性问题
4. 缺少必要的插件支持

解决方案详解

1. 优化 Jest 配置

正确的 Jest 配置应该专注于 React Native 测试环境，避免过度复杂的转换规则：

module.exports = {
  preset: "@testing-library/react-native",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  setupFilesAfterEnv: ["<rootDir>/jestSetup.ts"]
};

关键点说明：

• 使用 @testing-library/react-native 预设，它已经包含了 React Native 测试所需的基本配置
• 明确指定支持的文件扩展名
• 通过 setupFilesAfterEnv 加载测试环境设置

2. 完善测试环境设置

在 jestSetup.ts 文件中，我们需要确保测试环境正确初始化：

import "@testing-library/react-native/extend-expect";

jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
jest.mock("react-native-webrtc");
jest.mock("node-fetch", () => require("jest-fetch-mock"));

这段代码完成了三个重要任务：

1. 扩展了 React Native Testing Library 的断言能力
2. 模拟了 React Native 的动画模块
3. 处理了网络请求的模拟

3. 精简 Babel 配置

Babel 配置应该保持简洁，避免不必要的预设和插件：

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
    "babel-plugin-styled-components",
    [
      "module-resolver",
      {
        root: ["./src"],
        alias: {}
      }
    ]
  ]
};

这个配置的特点：

• 仅使用 React Native 官方推荐的 Babel 预设
• 只包含项目实际需要的插件
• 保持了模块解析功能

最佳实践建议

1. 避免混合多个预设：不要同时使用 @react-native/babel-preset 和 @babel/preset-react，这可能导致冲突

2. 谨慎使用 transformIgnorePatterns：除非必要，否则不要过度排除 node_modules 中的模块转换

3. 保持配置简洁：从最小配置开始，逐步添加必要的功能，而不是一开始就使用复杂配置

4. 定期更新依赖：确保 Jest、Babel 和相关测试库保持最新版本，以获得最佳兼容性

5. 统一测试环境：确保开发环境和 CI 环境使用相同的 Node.js 和包管理器版本

总结

解决 React Native 测试中的 ES6 模块解析问题，关键在于正确配置 Jest 和 Babel 的协作关系。通过简化配置、使用官方推荐的预设、合理设置测试环境，可以避免大多数模块解析相关的问题。本文提供的解决方案已经在实际项目中得到验证，能够有效解决 "Unexpected token 'export'" 这类错误，为 React Native 项目的测试提供稳定可靠的基础。