使用 ES6+ 在 Karma 中使用 Istanbul 设置 Browserify

Question

我正在尝试使用 Karma 运行 测试 具有准确的代码覆盖率输出 我的文件使用 ES6+ 包括 ES7 async/await 语法。

只有一个源文件：有效

作为开始，当我只有 一个源文件 时（即我的源文件中没有 require 调用），我设法让它工作。我只是告诉 Karma 在其上使用 babel 并在我的 .babelrc.

上配置 babel-plugin-istanbul

• karma.conf.js:

  preprocessors: {
      "test/*.js": [ "browserify" ],
      "lib/*.js": [ "babel" ]
  }
  

  请注意 "coverage" 预处理器 有意未包括在内 ，因为这是 babel-plugin-istanbul 指示执行的操作（它确实有效）。另外，我确实需要 browserify 测试，因为那里有一个 require('chai')。

• .babelrc:

  {
      "presets": [ "env" ],
      "env": {
          "test": {
              "plugins": [ "istanbul" ]
          }
      }
  }
  

• 覆盖率高：

使用 require() 的多个源文件：无效

现在我想让这个在我的真实情况下工作，这是很多源文件，一个到另一个的调用 require() 。为了完成这项工作，我不得不使用 browserify 预处理器，而不是简单地使用 babel 预处理器，但现在它似乎忽略了我的 .babelrc 并且没有使用 istanbul 覆盖率检测代码东西：

• karma.conf.js 更改为：

      preprocessors: {
          "test/*.js": [ "browserify" ],
          "lib/*.js": [ "browserify" ]
      }
  

  如果没有这个改变，即使是测试也不会 运行。有了它，测试运行，但覆盖率不起作用。

• 错误的覆盖结果：

我该如何解决这个问题？

---

此问题的存储库可在 GitHub

上找到

由于发生了很多事情，我决定创建一个 GitHub 存储库，以便任何人都可以立即轻松地重现我的情况：

• 要查看有效的第一部分：

  git clone https://github.com/papb/papb-Whosebug-q-51812979.git
  cd papb-Whosebug-q-51812979
  npm install
  npm test
  

• 查看不起作用的部分：

  git checkout doesnt-work
  npm test
  

• 要查看两者的完整差异（仅三行）：see the comparison on GitHub

Answer 1

OP在这里。我想通了：

npm install browserify-istanbul

将此添加到 karma.conf.js:

browserify: {
    configure: function(bundle) {
        bundle.transform(require('browserify-istanbul')({
            ignore: ['test/*.js']
        }));
    }
}

保留 preprocessors 原样（没有 coverage 预处理器！）

preprocessors: {
    "test/*.js": [ "browserify" ],
    "lib/*.js": [ "browserify" ]
}

就是这样。你可以去掉 .babelrc 和 babel-plugin-istanbul，它们甚至不是必需的。