Karma-Webpack与npm项目中karma-cucumber-js适配问题求助

问题根源分析 #

你遇到的核心问题是旧版本的karma-cucumber-js@0.3.3依赖全局变量暴露机制，但Webpack的打包逻辑默认会隔离模块变量，加上Node 8.x对模块加载的处理变化，导致__adapter__、Cucumber、CucumberHTML无法在测试代码的全局作用域中被访问。旧项目在Node 0.8.x时，模块加载机制更宽松，这些变量可能被自动挂载到window，但升级后Webpack的闭包打包打破了这个逻辑。

1. 为什么当前Webpack配置无法正常工作？ #

Webpack的核心特性是将所有模块打包到独立的闭包中，默认不会把第三方库的变量暴露到全局window对象。而旧版本的karma-cucumber-js设计时依赖：

• __adapter__作为全局变量供测试步骤文件调用
• Cucumber和CucumberHTML全局可用以支撑适配器运行

你的Webpack配置没有处理这些全局变量的暴露，同时Karma的文件加载顺序可能也没有确保这些依赖在测试代码之前加载并全局化，导致测试执行时找不到这些变量。

2. 如何修复该问题？ #

推荐两种方案，优先选择无需修改node_modules的优雅方案：

方案一：通过Webpack和Karma配置暴露全局变量

步骤1：修改webpack.config.js，添加全局暴露配置

使用expose-loader将__adapter__挂载到window，用ProvidePlugin让Cucumber和CucumberHTML全局可用：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.resolve('.'),
  entry: './src/index.js',
  output: {
    filename: "./dist/output.js"
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      path.resolve('./src'),
      path.resolve('./node_modules')
    ]
  },
  plugins: [
    // 让Cucumber和CucumberHTML成为全局变量
    new webpack.ProvidePlugin({
      Cucumber: 'cucumber',
      CucumberHTML: 'cucumber-html'
    })
  ],
  module: {
    rules: [
      // 将karma-cucumber-js的adapter暴露为全局__adapter__
      {
        test: require.resolve('karma-cucumber-js/lib/adapter.js'),
        use: [{
          loader: 'expose-loader',
          options: '__adapter__'
        }]
      }
    ]
  }
};

步骤2：调整karma.conf.js的文件加载顺序

确保依赖库在测试代码之前加载，且不对核心依赖文件做Webpack预处理（避免闭包隔离）：

module.exports = function(config) {
  config.set({
    // ... 其他配置（比如浏览器、reporter等）
    files: [
      // 先加载Cucumber核心库
      './node_modules/cucumber/release/cucumber.js',
      './node_modules/cucumber-html/src/main/resources/cucumber/formatter/formatter.js',
      // 加载适配器并通过Webpack暴露全局
      './node_modules/karma-cucumber-js/lib/adapter.js',
      // 加载feature文件和测试步骤
      'features/**/*.feature',
      'features/**/*.steps.js'
    ],
    preprocessors: {
      // 只对测试步骤文件做Webpack处理
      'features/**/*.steps.js': ['webpack'],
      // 不要预处理Cucumber和适配器文件，保留全局变量
    },
    // 确保karma-cucumber-js被列为框架
    frameworks: ['cucumber-js']
  });
};

方案二：改进临时Hack（不推荐，但可快速验证）

如果你暂时不想调整配置，可以修改node_modules/karma-cucumber-js/lib/adapter.js，一次性引入所有依赖并挂载到全局：

// 先导入依赖
var Cucumber = require('../../cucumber/release/cucumber.js');
var CucumberHTML = require('../../cucumber-html/src/main/resources/cucumber/formatter/formatter.js');

// 将依赖挂载到全局
window.Cucumber = Cucumber;
window.CucumberHTML = CucumberHTML;

// 原适配器代码
var __adapter__;
(function (win) {
  var adapter = new karma.CucumberAdapter(__karma__);
  __adapter__ = adapter;
  __karma__.start = adapter.getStart();
  win.__adapter__ = __adapter__;
})(window);

注意：这种方式每次npm install后都会被覆盖，需要用patch-package工具保存修改，避免重复操作。

3. 调试与替代方案 #

调试技巧

• 检查全局变量：在Karma运行时打开浏览器开发者工具，查看window对象是否包含__adapter__、Cucumber等变量，确认是否被正确挂载。
• Webpack调试：运行npm run wpd生成调试版打包文件，查看打包后的代码中这些变量是否被暴露到全局。
• Karma日志：在karma.conf.js中开启logLevel: config.LOG_DEBUG，查看文件加载顺序和模块初始化日志，定位加载时机问题。

替代方案

• 尝试兼容版本组合：虽然你希望保持版本，但可以尝试karma-cucumber-js@0.4.x（兼容Karma 1.7.x），看看是否无需修改测试代码就能运行。
• 弃用Karma，直接用Cucumber-JS：如果项目允许少量修改，可改用cucumber-js原生运行器，结合puppeteer模拟浏览器环境，避免Karma的复杂配置。
• 移除Webpack打包：如果测试代码不需要复杂的模块处理，可直接用Karma加载所有JS文件，跳过Webpack，恢复旧项目的全局变量加载模式。

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