React-Native组件测试报Cannot use import statement outside a module错误

问题根源 #

这个SyntaxError: Cannot use import statement outside a module报错本质是React Native默认测试框架Jest没有把对应文件/依赖识别为需要转译的ES模块，出现报错范围扩散的原因如下：

• 最初仅ComponentC报错，是因为它是第一个引入expo-constants这类Expo专属依赖的组件，默认Jest配置不会转译node_modules下的Expo相关依赖包，这类包本身是ES模块格式，直接导入就会触发import语法报错
• 后续其他组件也出现相同报错，通常是这些组件也引入了未被纳入转译白名单的ES模块依赖，或是用到了未配置导入规则的静态资源，导致转译链路异常
• 不要在package.json中添加"type":"module"，React Native生态大部分工具链还未完全适配ESM规范，添加后反而会触发更多CommonJS模块的兼容问题

解决步骤 #

1. 修改项目根目录下的jest.config.js（或package.json中的jest配置段），添加未转译依赖的白名单，配置示例：

module.exports = {
  preset: 'react-native',
  // 新增转译忽略规则，将需要转译的ES模块前缀写入括号内
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|expo-constants|expo-modules-core|@expo)/)',
  ],
  // 配置静态资源映射，避免图片等资源导入触发报错
  moduleNameMapper: {
    '\\.(png|jpg|jpeg|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
  }
}

2. 在项目根目录新建__mocks__/fileMock.js文件，内容如下：

module.exports = 'test-file-stub';

3. 检查项目根目录的babel.config.js，确认已经配置metro-react-native-babel-preset作为预设，且没有针对组件目录设置特殊的忽略转译规则。

内容的提问来源于stack exchange，提问作者ztylergeorge