React Native使用Jest测试出现报错，咨询报错原因及解决方法

报错含义与产生原因 #

该报错为React Native项目中Jest测试的典型适配问题，本质是Jest运行环境未完成RN生态的兼容配置，无法正常识别项目代码或第三方依赖的语法、资源文件，常见触发原因如下：

• 未配置对应的语法转换器，无法处理JSX、TS/TSX等React Native常用语法
• 未调整特殊node_modules包的编译忽略规则，部分RN生态的第三方依赖未提前编译为Jest可直接识别的CommonJS格式
• 未对图片、样式、原生模块等非JS资源做测试模拟，导致代码引用对应资源时执行失败

解决方法 #

步骤1：检查基础测试预设配置 #

确保package.json中的jest配置段已经指定React Native官方测试预设：

{
  "jest": {
    "preset": "react-native"
  }
}

步骤2：配置文件转换规则 #

新增transform配置，指定babel-jest处理代码文件，同时配置静态资源的模拟规则：

"jest": {
  "preset": "react-native",
  "transform": {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
    "^.+\\.(png|jpg|jpeg|gif|svg)$": "<rootDir>/__mocks__/fileMock.js"
  }
}

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

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

步骤3：调整编译忽略规则 #

修改transformIgnorePatterns配置，将需要编译的RN生态第三方包加入编译列表，示例如下：

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|@react-native|react-native-vector-icons)/)"
]

如果你用到了其他未预编译的RN第三方包，直接在括号内用|分隔补充即可。

步骤4：配置样式文件模拟 #

安装样式模拟依赖：
npm install identity-obj-proxy --save-dev
在jest配置中新增样式映射规则：

"moduleNameMapper": {
  "\\.(css|less|scss|sass)$": "identity-obj-proxy"
}

所有配置修改完成后重新执行Jest测试即可。

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