React Native Expo 单元测试中解决 superjson 导入错误问题

在 React Native 开发中，使用 Expo 框架进行单元测试时，开发者可能会遇到一个常见问题：SyntaxError: Cannot use import statement outside a module。这个错误通常出现在测试环境中尝试导入 superjson 包时。

问题背景

superjson 是一个流行的 JavaScript 库，它能够将复杂的 JavaScript 对象（如 Date、RegExp 等）序列化为 JSON，并在反序列化时保持原始类型。在 React Native 项目中，特别是使用 Expo 框架时，测试配置需要特别注意对某些包的转换处理。

错误原因分析

这个错误的发生是因为 Jest 测试运行器默认会忽略 node_modules 目录中的文件转换。当测试代码尝试导入 superjson 时，Jest 没有对其进行 Babel 转换，导致 ES6 的 import 语句无法被识别。

解决方案

解决这个问题的关键在于修改 Jest 的 transformIgnorePatterns 配置。在 React Native Expo 项目中，我们需要确保 superjson 包不会被 Jest 忽略转换。

典型的解决方案是在 jest.config.js 文件中修改 transformIgnorePatterns 配置，将 superjson 添加到排除列表中：

transformIgnorePatterns: [
  `node_modules/(?!(?:.pnpm/)?((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|superjson))`
]

配置详解

这个正则表达式模式做了以下工作：

1. 匹配 node_modules 目录
2. 使用负向先行断言(?!...)排除特定包
3. 包含了 React Native 生态系统中常见的包
4. 特别添加了 superjson 到白名单中

最佳实践建议

1. 保持配置更新：随着项目依赖的增加，可能需要不断更新这个模式来包含新的需要转换的包
2. 性能考虑：transformIgnorePatterns 应该尽可能精确，避免不必要的转换影响测试速度
3. 环境一致性：确保测试环境与开发/生产环境使用的 Babel 配置一致
4. 版本兼容性：检查 superjson 版本与项目其他依赖的兼容性

扩展思考

这个问题不仅限于 superjson 包，任何使用现代 JavaScript 语法（如 ES6 模块）的第三方库都可能遇到类似问题。理解 Jest 的模块转换机制对于 React Native 开发者来说是一项重要技能。

通过正确配置 transformIgnorePatterns，开发者可以确保测试环境能够正确处理各种第三方依赖，从而提高测试的可靠性和项目的稳定性。