React Native配置Jest时无法导入测试文件外组件报ESM语法错误

核心问题表现 #

• 测试文件自身的导入逻辑可被Jest正常解析，但导入src目录下的业务组件时直接中断
• 报错指向组件文件第一行的import语法，提示当前环境不支持ES模块语法
• 现有项目配置缺失Jest运行的必要配套规则，导致非测试路径下的业务文件未被Babel转译为Jest可识别的CommonJS格式

问题根因 #

• Jest配置缺失：package.json中未声明任何Jest相关配置，也未安装Jest核心依赖，默认规则不会对业务路径下的jsx文件执行转译
• Babel配置不适配：当前babel.config.js手动配置了通用Babel预设，未使用React Native生态配套的metro-react-native-babel-preset，转译规则和Jest运行环境不匹配
• 导入路径偏差：根据实际目录结构，测试文件中写的组件导入路径../example/src/ButtonInstance和真实文件位置../src/components/ButtonInstance不匹配
• 测试依赖不全：@testing-library/react-native、react-test-renderer等Jest运行React Native测试的核心依赖未纳入开发依赖列表
• 组件逻辑瑕疵：自定义ButtonInstance组件直接将函数入参当作onPress使用，未从props对象中解构参数，会导致事件mock逻辑失效

分步修复操作 #

• 修正Babel配置，替换现有babel.config.js内容，匹配React Native + Jest的转译要求：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@babel/plugin-proposal-class-properties']
};

该配置直接复用项目已安装的metro-react-native-babel-preset，内置JSX语法转译、ESM转CommonJS、Flow类型移除的全流程能力，无需手动堆叠多个通用Babel预设。

• 调整package.json配置，补充Jest运行规则、测试脚本：

{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": ["js", "jsx", "json"]
  }
}

对应需要补充安装的开发依赖包括：jest@26.6.3、@testing-library/react-native@7.2.0、babel-jest@26.6.3、react-test-renderer@16.13.1，版本需和项目当前的React Native 0.63.4、React 16.13.1版本匹配。

• 修正测试文件的组件导入路径，匹配实际目录结构：
  将原导入语句import ButtonInstance from '../example/src/ButtonInstance';替换为import ButtonInstance from '../src/components/ButtonInstance';
• 修正ButtonInstance组件的props接收逻辑：
  原代码直接将函数入参作为onPress使用，实际接收到的是完整props对象，修正后代码为：

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

export default function ButtonInstance(props) {
  const { onPress } = props;
  return (
    <TouchableHighlight onPress={onPress}>
      <Text>Press me</Text>
    </TouchableHighlight>
  );
}

验证方式 #

• 安装完成所有依赖后，执行npm test或yarn test触发测试流程
• 确认不再抛出ESM语法解析错误，点击事件的mock断言可以正常执行

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