React Native使用Jest测试时因ErrorHandler类型报错崩溃

问题根源 #

报错文件@react-native/polyfills/error-guard.js中使用了TypeScript类型定义语法，但当前Jest配置未将@react-native这个scope包加入转译白名单，导致Jest跳过了对该文件的Babel转译，直接执行未转译的TS代码，从而无法识别type关键字引发报错。

解决方案 #

1. 修正Jest的transformIgnorePatterns配置 #

修改package.json中的jest配置，将@react-native加入不被忽略转译的列表：

"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "node_modules/(?!((jest-)?react-native|@react-native))"
  ]
}

该正则会让Jest不对react-native、jest-react-native以及@react-native开头的包跳过转译，确保@react-native/polyfills下的文件能被Babel正常处理。

2. 确认Babel配置无需改动 #

你的babel.config.js使用module:metro-react-native-babel-preset预设是正确的，该预设已包含转译React Native代码和处理TS语法的能力，保持原样即可：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

3. 清除Jest缓存后重新测试 #

先清除Jest缓存，避免旧编译文件干扰：

npx jest --clearCache

再重新运行测试：

npm test

额外排查项 #

若上述方案无效，可检查以下两点：

• 确认你的React Native版本与Jest 29.2.1是否兼容，参考官方版本匹配说明。
• 若项目有单独的TypeScript配置，确保@babel/preset-typescript已安装并加入Babel预设（metro预设通常已包含该能力，大概率无需额外操作）。

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