Javascript NpmPrettyMuch的Karma网页包布线问题 问题

我正在尝试在我的Npm项目中使用适配器使用Karma测试运行程序运行Cumber测试。但是，在运行测试时，我在控制台中发现以下错误：

START:
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: __adapter__
  at features/Test.steps.js:80

对于更多的上下文，我处于一个平台迁移的中间。我们之前有一个复杂的系统，基本上使用了karma 1.7.x、cucumber 1.2.x、karma cucumber js 0.3.3和节点0.8.x。我正在尝试使用相同的精确版本设置一个简单的npm项目（除了现在我使用Node 8.x，因为我不允许使用0.8.x）。我们有一套数千个旧测试，我们希望尽量减少修改，而且由于我们的测试系统与karma和cucumber紧密耦合，karma cucumber js插件最容易工作

我尝试过的事情 我在包的node_modules目录中对依赖的karma cucumber js源代码进行了一些调整，试图更好地理解手头的问题。我可以通过修改窗口中的适配器变量来绕过上述问题，如下所示：

var __adapter__;
(function (win) {
    var adapter = new karma.CucumberAdapter(__karma__);
    __adapter__ = adapter;
    __karma__.start = adapter.getStart();
    win.__adapter__ = __adapter__;
})(window);

这将导致下一个错误：

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: Cucumber
  at node_modules/karma-cucumber-js/src/adapter.js:242

我通过在“use strict”之后的文件顶部添加以下代码行来解决此问题：

var Cucumber = require('../../cucumber/release/cucumber.js');

这导致了这个问题：

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: CucumberHTML
  at node_modules/karma-cucumber-js/src/adapter.js:177

解决方法是手动要求文件adapter.js：

var CucumberHTML = require('../../cucumber-html/src/main/resources/cucumber/formatter/formatter.js');

有了这个“黑客”技术，cucumber测试现在能够成功运行：

START:
PhantomJS 2.1.1 (Mac OS X 0.0.0) LOG: 'Found features: /base/features/Test.feature'
PhantomJS 2.1.1 (Mac OS X 0.0.0) LOG: 'Tags: '
  Is it Friday yet?
    Friday is Friday
      ✔ Given today is Friday
      ✔ When I ask whether it's Friday yet
      ✔ Then I should be told "TGIF"

Finished in 0.002 secs / 0.002 secs @ 19:36:12 GMT-0700 (PDT)

SUMMARY:
✔ 3 tests completed

潜在的问题似乎是，出于某种原因，karma Cumber js包末尾声明的[这些类型脚本变量][4]不可使用。我认为这是由于一个网页布线问题

我还尝试了其他一些事情：

• 使用其他因果报应适配器（还有2个），没有运气
• 玩弄karma/phantomjs/cucumber版本组合
• 使用Firefox和Chrome替代PhantomJS

我的问题

我需要帮助理解为什么这个网页设置不起作用。我怎样才能解决这个问题

是否有我遗漏的步骤或我应该采取的其他方法来调试和解决手头的问题

我已经包括了下面的一些项目代码，谢谢你的时间

项目代码 package.json:

{
  "name": "npm-pretty-much-local-example",
  "version": "1.0.0",
  "scripts": {
    "wp": "webpack",
    "wpd": "webpack --debug",
    "test": "./node_modules/karma/bin/karma start"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.0",
    "@babel/preset-typescript": "^7.7.x",
    "babel-generator": "^6.26.1",
    "babel-core": "^6.26.3",
    "cucumber": "^1.2.x",
    "jquery": "^3.4.1",
    "karma": "^1.7.x",
    "karma-cucumber-js": "^0.3.3",
    "karma-mocha-reporter": "^2.0.5",
    "karma-phantomjs-launcher": "^1.0.x",
    "karma-webpack": "^1.7.x",
    "socket.io": "^1.4.x",
    "webpack": "^3.7.1",
    "setimmediate": "^1.0.5",
    "karma-typescript-preprocessor": "^0.4.0"
  },
  "dependencies": {}
}

const path = require('path');

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')
    ]
  }
};

@Test
Feature: Is it Friday yet?
  Everybody wants to know when it's Friday

  Scenario: Friday is Friday
    Given today is Friday
    When I ask whether it's Friday yet
    Then I should be told "TGIF"

function isItFriday(today) {
    if (today === "Friday") {
        return "TGIF";
    } else {
        return "Nope";
    }
}
 
// TODO: why is this not defined, and how was __adapter__ defined in the first place?
__adapter__.addStepDefinitions(function (scenario) {
    scenario.Given('today is {string}', function (givenDay) {
        this.today = givenDay;
    });
 
    scenario.When('I ask whether it\'s Friday yet', function () {
        this.actualAnswer = isItFriday(this.today);
    });
 
    scenario.Then('I should be told {string}', function (expectedAnswer) {
        return this.actualAnswer === expectedAnswer;
    });
});

webpack.config.js:

{
  "name": "npm-pretty-much-local-example",
  "version": "1.0.0",
  "scripts": {
    "wp": "webpack",
    "wpd": "webpack --debug",
    "test": "./node_modules/karma/bin/karma start"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.0",
    "@babel/preset-typescript": "^7.7.x",
    "babel-generator": "^6.26.1",
    "babel-core": "^6.26.3",
    "cucumber": "^1.2.x",
    "jquery": "^3.4.1",
    "karma": "^1.7.x",
    "karma-cucumber-js": "^0.3.3",
    "karma-mocha-reporter": "^2.0.5",
    "karma-phantomjs-launcher": "^1.0.x",
    "karma-webpack": "^1.7.x",
    "socket.io": "^1.4.x",
    "webpack": "^3.7.1",
    "setimmediate": "^1.0.5",
    "karma-typescript-preprocessor": "^0.4.0"
  },
  "dependencies": {}
}

const path = require('path');

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')
    ]
  }
};

@Test
Feature: Is it Friday yet?
  Everybody wants to know when it's Friday

  Scenario: Friday is Friday
    Given today is Friday
    When I ask whether it's Friday yet
    Then I should be told "TGIF"

function isItFriday(today) {
    if (today === "Friday") {
        return "TGIF";
    } else {
        return "Nope";
    }
}
 
// TODO: why is this not defined, and how was __adapter__ defined in the first place?
__adapter__.addStepDefinitions(function (scenario) {
    scenario.Given('today is {string}', function (givenDay) {
        this.today = givenDay;
    });
 
    scenario.When('I ask whether it\'s Friday yet', function () {
        this.actualAnswer = isItFriday(this.today);
    });
 
    scenario.Then('I should be told {string}', function (expectedAnswer) {
        return this.actualAnswer === expectedAnswer;
    });
});

测试。功能：

{
  "name": "npm-pretty-much-local-example",
  "version": "1.0.0",
  "scripts": {
    "wp": "webpack",
    "wpd": "webpack --debug",
    "test": "./node_modules/karma/bin/karma start"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.0",
    "@babel/preset-typescript": "^7.7.x",
    "babel-generator": "^6.26.1",
    "babel-core": "^6.26.3",
    "cucumber": "^1.2.x",
    "jquery": "^3.4.1",
    "karma": "^1.7.x",
    "karma-cucumber-js": "^0.3.3",
    "karma-mocha-reporter": "^2.0.5",
    "karma-phantomjs-launcher": "^1.0.x",
    "karma-webpack": "^1.7.x",
    "socket.io": "^1.4.x",
    "webpack": "^3.7.1",
    "setimmediate": "^1.0.5",
    "karma-typescript-preprocessor": "^0.4.0"
  },
  "dependencies": {}
}

const path = require('path');

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')
    ]
  }
};

@Test
Feature: Is it Friday yet?
  Everybody wants to know when it's Friday

  Scenario: Friday is Friday
    Given today is Friday
    When I ask whether it's Friday yet
    Then I should be told "TGIF"

function isItFriday(today) {
    if (today === "Friday") {
        return "TGIF";
    } else {
        return "Nope";
    }
}
 
// TODO: why is this not defined, and how was __adapter__ defined in the first place?
__adapter__.addStepDefinitions(function (scenario) {
    scenario.Given('today is {string}', function (givenDay) {
        this.today = givenDay;
    });
 
    scenario.When('I ask whether it\'s Friday yet', function () {
        this.actualAnswer = isItFriday(this.today);
    });
 
    scenario.Then('I should be told {string}', function (expectedAnswer) {
        return this.actualAnswer === expectedAnswer;
    });
});

Test.steps.js:

{
  "name": "npm-pretty-much-local-example",
  "version": "1.0.0",
  "scripts": {
    "wp": "webpack",
    "wpd": "webpack --debug",
    "test": "./node_modules/karma/bin/karma start"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.0",
    "@babel/preset-typescript": "^7.7.x",
    "babel-generator": "^6.26.1",
    "babel-core": "^6.26.3",
    "cucumber": "^1.2.x",
    "jquery": "^3.4.1",
    "karma": "^1.7.x",
    "karma-cucumber-js": "^0.3.3",
    "karma-mocha-reporter": "^2.0.5",
    "karma-phantomjs-launcher": "^1.0.x",
    "karma-webpack": "^1.7.x",
    "socket.io": "^1.4.x",
    "webpack": "^3.7.1",
    "setimmediate": "^1.0.5",
    "karma-typescript-preprocessor": "^0.4.0"
  },
  "dependencies": {}
}

const path = require('path');

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')
    ]
  }
};

@Test
Feature: Is it Friday yet?
  Everybody wants to know when it's Friday

  Scenario: Friday is Friday
    Given today is Friday
    When I ask whether it's Friday yet
    Then I should be told "TGIF"

function isItFriday(today) {
    if (today === "Friday") {
        return "TGIF";
    } else {
        return "Nope";
    }
}
 
// TODO: why is this not defined, and how was __adapter__ defined in the first place?
__adapter__.addStepDefinitions(function (scenario) {
    scenario.Given('today is {string}', function (givenDay) {
        this.today = givenDay;
    });
 
    scenario.When('I ask whether it\'s Friday yet', function () {
        this.actualAnswer = isItFriday(this.today);
    });
 
    scenario.Then('I should be told {string}', function (expectedAnswer) {
        return this.actualAnswer === expectedAnswer;
    });
});

src/index.js

var dummyVar = "";