Sourcemap + istanbul/isparta webpack 的代码覆盖率 + babel (for es6) + mocha (+karma)

Question

我在https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage有一个测试项目。

\n\n

它由两个简单的源文件组成src/，其中一个有一个故意错误（src/lib2.js )。

\n\n

我想使用 babel 进行 webpack 和从 ES6 到 ES5 的转译，并使用 Karma 在此包上运行 Mocha 测试。

\n\n

我已经添加了源映射并对此进行了测试，以便我可以看到原始文件的行号。

\n\n

对我来说，堆栈跟踪如下所示：

\n\n

21 02 2016 16:03:15.445:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/\n21 02 2016 16:03:15.451:INFO [launcher]: Starting browser Chrome\n21 02 2016 16:03:16.551:INFO [Chrome 48.0.2564 (Linux 0.0.0)]: Connected on socket /#yRS32ons0_2HGhrwAAAA with id 3072946\n\nSTART:\n  lib1\n    \xe2\x9c\x96 should return 1\n\nFinished in 0.015 secs / 0.001 secs\n\nSUMMARY:\n\xe2\x9c\x94 0 tests completed\n\xe2\x9c\x96 1 test failed\n\nFAILED TESTS:\n  lib1\n    \xe2\x9c\x96 should return 1\n      Chrome 48.0.2564 (Linux 0.0.0)\n    Error: SIMULATED ERROR\n        at foo (/home/danb/projects/so-test-project/tests.webpack.js:135:10 <- webpack:///src/lib2.js:13:8)\n        at Context.<anonymous> (/home/danb/projects/so-test-project/tests.webpack.js:93:31 <- webpack:///test/index.js:7:11)\n

\n\n

在上面的倒数第二行，它显示webpack:///src/lib2.js:13原始源中的正确位置。

\n\n

为了获得该映射，我这样做了： //github.com/danielbush/webpack-babel-karma-sourcemap-coverage/commit/6ea992cae499dccc68488bcb3eaca642ae4ed24e

\n\n

我想要做的是使用像 istanbul （或使用 istanbul 的 isparta）之类的东西添加覆盖率，以便我可以在coverage/中生成 HTML 覆盖率报告，该报告向我显示未覆盖（可能）的行以及整体覆盖百分比。

\n\n

但我想确保我的堆栈跟踪仍然像上面一样正确地进行源映射。

\n\n

我已经尝试过 isparta-loader 和 isparta-instrumenter-loader 在 webpack 中转译和检测有问题的文件，但我的堆栈跟踪中的行号略有错误（上面）。似乎有许多类似 isparta 的东西四处流传，而且文档也不是超级友好。

\n\n

为了更笼统地表达所有这些：我正在捆绑文件和测试，然后在浏览器中测试它（业力或通过更多手动方式），并且我希望我的源映射（在浏览器中）指向原始文件代码行并且同时我想要一份覆盖率报告来引用尚未覆盖的原始行和文件。

\n

Answer 1

我没有针对单个 karma/webpack 配置的解决方案。我的解决方法是有 2 个 karma confs - 我对 atm 很满意。（我还有其他非业力设置来运行测试。）

一个conf在后台运行测试，并为我的es6代码提供准确的堆栈跟踪，另一个conf使用isparta-loader运行覆盖来转译和检测我的源代码。（isparta-loader使用isparta，它使用 istanbul ）。

所以我的“运行测试”业力配置看起来有点像这样：

var webpack = require('webpack');
module.exports = function (config) {
  config.set({
    browsers: [ 'PhantomJS' ],
    singleRun: false,
    frameworks: [ 'mocha' ], // Use the mocha test framework
    files: [
      'tests.webpack.js'
    ],
    preprocessors: {
      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
    },
    reporters: [ 'mocha' ],
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          // Use imports loader to hack webpacking sinon.
          // https://github.com/webpack/webpack/issues/177
          {
            test: /sinon\.js/,
            loader: "imports?define=>false,require=>false"
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          }
        ]
      }
    },
    webpackServer: {
      noInfo: true
    }
  });
}

我的覆盖范围 karma conf 看起来有点像这样：

var webpack = require('webpack'),
    path = require('path');
module.exports = function (config) {
  config.set({
    browsers: [ 'PhantomJS' ],
    singleRun: true,
    frameworks: [ 'mocha' ],
    files: [
      'tests.webpack.js'
    ],
    preprocessors: {
      'tests.webpack.js': [ 'webpack' ]
    },
    reporters: [ 'coverage' ],
    webpack: {
      // *optional* babel options: isparta will use it as well as babel-loader
      babel: {
        presets: ['es2015']
      },
      // *optional* isparta options: istanbul behind isparta will use it
      isparta: {
        embedSource: true,
        noAutoWrap: true,
        // these babel options will be passed only to isparta and not to babel-loader
        babel: {
          presets: ['es2015']
        }
      },
      module: {
        loaders: [
          {
            test: /sinon\.js/,
            loader: "imports?define=>false,require=>false"
          },
          // Perform babel transpiling on all non-source, test files.
          {
            test: /\.js$/,
            exclude: [
              path.resolve('node_modules/'),
              path.resolve('lib/')
            ],
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          },
          // Instrument source files with isparta-loader (will perform babel transpiling).
          {
            test: /\.js$/,
            include: [
              path.resolve('lib/')
            ],
            loader: 'isparta'
          }
        ]
      }
    },
    webpackServer: {
      noInfo: true
    },
    coverageReporter: {
      reporters: [
        { type: 'html', dir: 'coverage/' },
        { type: 'text' }
      ]
    }
  });
}

第二个conf提供了一个文本报告，它在终端中提供了即时的覆盖范围摘要，而html报告则提供了未测试代码的良好源文件突出显示。（sinon 都有一个 hack，与这个问题无关。） tests.webpack.js使用 webpackrequire.context来拉入我用 mocha 编写的浏览器测试。并且需要各种 karma-* 插件。