Jest(ESM)搭配ts-jest运行React Native单元测试加载文件报错如何解决

根因说明 #

React Native包自身采用ESM语法编写，但package.json未声明"type": "module"，Jest默认将其识别为CommonJS模块，遇到import语法就会报错。你不能将.js后缀加入extensionsToTreatAsEsm的限制可以通过主动转换指定node_modules包的方式绕开，无需切换react-native预设也能兼容现有TS+ESM配置。

具体配置修改 #

1. 调整package.json中的jest配置

"jest": {
  "resetMocks": true,
  // 测试环境替换为jsdom，若用到RN专属原生API可换用jest-environment-react-native
  "testEnvironment": "jsdom",
  "testMatch": [
    "**/src/**/*.(spec|test).[tj]s?(x)"
  ],
  "preset": "ts-jest/presets/default-esm",
  "transform": {
    // 让ts-jest同时处理js/ts/tsx文件
    "^.+\\.[tj]sx?$": ["ts-jest", { "useESM": true }]
  },
  "extensionsToTreatAsEsm": [
    ".ts",
    ".tsx"
  ],
  // 不对react-native包做转换忽略，让ts-jest处理其内部js文件
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native)/)"
  ],
  // 处理RN默认引入的静态资源，避免非JS文件报错
  "moduleNameMapper": {
    "\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
  }
}

2. 新增静态资源mock文件

在项目根目录新建__mocks__文件夹，新增两个文件：

• fileMock.js内容：

export default 'test-file-stub';

• styleMock.js内容：

export default {};

注意事项 #

• 测试执行命令保持node --experimental-vm-modules node_modules/jest/bin/jest.js不变
• 如果后续用到其他React Native生态第三方库也报相同的import语法错误，只需把包名加到transformIgnorePatterns的括号内，多包用|分隔即可，示例：node_modules/(?!(react-native|react-native-vector-icons|@react-native)/)
• 无需额外安装Babel相关依赖，全链路保持ts-jest转换即可，不会和现有TS ESM配置冲突

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