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

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

2025-06-25 17:48:18作者:仰钰奇

在 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 项目的测试提供稳定可靠的基础。

登录后查看全文
热门项目推荐
相关项目推荐