Cucumber.js v4搭配Babel编译器的兼容问题求助

我之前也踩过这个坑！Cucumber从v3版本开始就正式移除了--compiler选项，所以到v4时这个参数已经完全失效——虽然加了不会报错，但根本起不到转译作用，这就是你遇到JSX语法就报错的原因。给你几个实用的替代方案：

方案1：直接用--require加载Babel转译钩子 #

把原来的命令改成直接引入babel的register模块，让Cucumber在执行测试前先完成代码转译：

# 如果是Babel 6及以下（依赖babel-core）
node_modules/.bin/cucumber-js --require babel-core/register

# 如果是Babel 7+（依赖@babel/register）
node_modules/.bin/cucumber-js --require @babel/register

这个方式和原来的--compiler效果一致，babel的register会实时转译所有后续加载的JS/JSX文件。

方案2：使用Cucumber配置文件简化命令 #

在项目根目录创建cucumber.js配置文件，把常用参数写进去，以后直接运行cucumber-js即可：

module.exports = {
  default: [
    '--require babel-core/register', // 或@babel/register，根据你的Babel版本选择
    '--require features/**/*.step.js', // 替换成你的测试步骤文件路径
    '--require features/**/*.js' // 替换成你的测试场景文件路径
  ].join(' ')
};

方案3：确保Babel配置正确处理JSX #

如果你的测试代码里有JSX，一定要在Babel配置（.babelrc或babel.config.json）中加入React预设：

{
  "presets": [
    "@babel/preset-env", // 转译ES6+语法
    "@babel/preset-react" // 转译JSX语法
  ]
}

同时要确保已经安装了对应的依赖包：

# Babel 7+
npm install --save-dev @babel/core @babel/register @babel/preset-env @babel/preset-react

# Babel 6
npm install --save-dev babel-core babel-register babel-preset-env babel-preset-react

这样调整后，Cucumber就能正确转译并执行包含JSX的测试代码了。

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