WebStorm Cucumber插件无法适配TypeScript ESM即时转译求助

需求目标 #

• CucumberJS支持CLI运行生成美观报告，同时WebStorm插件可可视化执行测试，快速定位失败代码
• 通过ts-node即时转译TypeScript步骤文件，不生成冗余JS文件，保持项目整洁
• 项目强制使用ESM（import）语法，禁止使用CommonJS（require）

现有CLI成功配置 #

package.json #

{
  "name": "Test config",
  "version": "1.0.0",
  "description": "",
  "main": "src/calculator.ts",
  "scripts": {
    "test1": "SET NODE_OPTIONS=--loader ts-node/esm --no-warnings --experimental-specifier-resolution=node && cucumber-js",
  },
  "type": "module",
  "devDependencies": {
    "@cucumber/cucumber": "8.11.1",
    "@types/node": "18.13.0",
    "ts-node": "10.9.1",
    "typescript": "4.9.5"
  }
}

cucumber.json #

{
  "default": {
    "paths": ["src/*.feature"],
    "import": ["src/support/*.steps.ts"],
    "parallel": 1,
    "format": ["html:cucumber-report.html"],
    "publishQuiet": true
  }
}

WebStorm插件运行错误 #

配置环境变量NODE_OPTIONS=--loader ts-node/esm --no-warnings --experimental-specifier-resolution=node后，通过插件运行feature文件时触发以下错误：

"C:\Program Files\nodejs\node.exe" C:\Users\DS\WebstormProjects\cc2\node_modules\@cucumber\cucumber\bin\cucumber-js C:\Users\DS\WebstormProjects\cc2\src\calculator.feature esm --format C:\Users\DS\AppData\Local\JetBrains\Toolbox\apps\WebStorm\ch-0\223.8617.44\plugins\javascript-cucumber\lib\cucumberjs_formatter_v7.js --format-options "{\"cucumberLibPath\": \"C:/Users/DS/WebstormProjects/cc2/node_modules/@cucumber/cucumber/lib\"}" --format-options "{\"colorsEnabled\": true}" --publish-quiet --require C:/Users/DS/WebstormProjects/cc2/src
Testing started at 01:22 ...
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for C:\Users\DS\WebstormProjects\cc2\node_modules\@cucumber\cucumber\bin\cucumber-js
    at new NodeError (node:internal/errors:399:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:74:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:114:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at C:\Users\DS\WebstormProjects\cc2\node_modules\ts-node\src\esm.ts:255:45
    at async addShortCircuitFlag (C:\Users\DS\WebstormProjects\cc2\node_modules\ts-node\src\esm.ts:409:15)
    at async nextLoad (node:internal/modules/esm/loader:163:22)
    at async ESMLoader.load (node:internal/modules/esm/loader:597:20)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:449:11) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Process finished with exit code 1

手动将node_modules/@cucumber/cucumber/bin/cucumber-js重命名为cucumber-js.js可临时解决问题，但担心后续npm install会覆盖该修改，需要更可靠的方案。

可行解决方案 #

方案1：通过npm脚本启动WebStorm插件测试 #

1. 打开WebStorm的Run/Debug Configurations
2. 选中目标Cucumber配置，清空Node parameters，将Working directory设置为项目根目录
3. Command下拉选择npm，Script输入package.json中定义的test1
4. 保存配置后运行，插件会通过npm脚本启动，自动继承脚本中的NODE_OPTIONS，避开无扩展名文件的解析问题

方案2：自定义启动脚本替代直接调用cucumber-js #

在项目根目录创建cucumber-runner.js文件：

#!/usr/bin/env node
import { spawn } from 'node:child_process';

const cucumberProcess = spawn('node', [
  '--loader', 'ts-node/esm',
  '--no-warnings',
  '--experimental-specifier-resolution=node',
  './node_modules/@cucumber/cucumber/lib/main.js',
  ...process.argv.slice(2)
], { stdio: 'inherit' });

cucumberProcess.on('exit', (code) => process.exit(code));

然后在WebStorm的Cucumber配置中，将Cucumber.js path指向该自定义脚本，而非node_modules中的无扩展名文件。

方案3：调整WebStorm插件的Node参数 #

在WebStorm的Cucumber配置中，修改Node parameters为：

--loader ts-node/esm --no-warnings --experimental-specifier-resolution=node --input-type=module

同时在Additional cucumber.js options中手动指定--import src/support/*.steps.ts，避免插件自动添加的--require参数与ESM配置冲突。

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