如何使用Jest测试React Native TypeScript应用组件并解决相关报错？

根本原因 #

你遇到的报错是因为部分React Native第三方依赖（如报错中提到的react-native-iphone-x-helper、react-native-paper）发布时保留了ES模块的import语法，而Jest默认配置不会转译node_modules目录下的文件，因此无法识别非CommonJS格式的代码。

具体修复步骤 #

1. 统一配置入口：你当前同时在jest.config.js和package.json中配置了Jest规则，二者会出现冲突，建议删除package.json中的jest字段，仅保留jest.config.js作为唯一配置文件。
2. 修改jest.config.js配置，增加transformIgnorePatterns字段，将使用ES模块语法的第三方包加入转译列表，参考配置如下：

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '\\.(ts|tsx)$': 'ts-jest'
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json' // 如果你没有单独的tsconfig.jest.json，直接用主配置即可
    }
  },
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  // 关键配置：排除不需要转译的node_modules包，仅把用了ES模块的包加入转译列表
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|react-native-iphone-x-helper|react-native-paper)/)'
  ]
}

3. 校验tsconfig.json配置：你当前的配置无需修改，符合测试要求。如果后续新增其他第三方包出现同类报错，只需将包名添加到上述transformIgnorePatterns的括号内，用|分隔即可。

最小可运行示例参考 #

你可以按照以下结构搭建最小验证项目：

• 安装依赖：react-native、typescript、jest、ts-jest、babel-jest、@types/jest、@types/react-native、react-test-renderer
• 新建组件src/TestComponent.tsx：

import React from 'react';
import { Text, View } from 'react-native';

const TestComponent = () => {
  return <View><Text>测试组件</Text></View>
}
export default TestComponent;

• 新建测试用例src/__tests__/TestComponent.test.tsx：

import React from 'react';
import renderer from 'react-test-renderer';
import TestComponent from '../TestComponent';

test('组件正常渲染', () => {
  const tree = renderer.create(<TestComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

• 在package.json中添加测试脚本："test": "jest"
• 运行npm run test即可正常执行测试。

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