React Native+TypeScript+cucumber-js导入TS函数到步骤定义报错求解

AI 小北

2026-10-1

解决方案

根因说明

报错的核心原因是ts-node默认以CommonJS规范加载模块，且默认跳过转译node_modules下的文件，而React Native包本身采用ESM规范编写，未经过转译的ESMimport语句直接在CommonJS环境下运行就会触发语法错误。

可行解决方法

方案1：调整tsconfig配置，让ts-node转译React Native包
在项目根目录的tsconfig.json中新增如下配置，让ts-node不忽略React Native相关文件，自动将ESM语法转译为CommonJS：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "transpileOnly": true,
    "ignore": ["node_modules/(?!(react-native|@react-native)/)"]
  }
}

原有cucumber.js配置无需修改，重启测试即可。

方案2：替换为Babel转译（适配性更高）
React Native本身依赖Babel做语法转译，用Babel替代ts-node处理转译逻辑适配性更强：
1. 安装依赖：
```
npm install @babel/core @babel/preset-env @babel/preset-typescript metro-react-native-babel-preset @babel/register --save-dev
```
1. 根目录新增babel.config.js：
```
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    'module:metro-react-native-babel-preset'
  ]
};
```
1. 修改cucumber.js配置，将--require-module ts-node/register替换为--require-module @babel/register即可。
方案3：纯业务逻辑解耦（长期最优）
如果你测试的业务函数不依赖React Native原生API、UI组件等能力，可将这部分逻辑抽离为独立的纯TS模块，完全移除对react-native包的依赖，导入时不会触发相关语法错误。
临时排查点
先检查你导入的业务文件是否存在不必要的react-native导入语句，若存在可以先删除无效导入，也可直接解决报错。