如何使用 isparta、webpack、jasmine 和 karma 获得准确的代码覆盖率？答案

【问题标题】：How to get code coverage numbers accurate with isparta, webpack, jasmine and karma?如何使用 isparta、webpack、jasmine 和 karma 获得准确的代码覆盖率？
【发布时间】：2016-01-12 23:42:27
【问题描述】：

在尝试使用 webpack、isparta、jasmine 和 karma 的组合时，我很难获得正确的代码覆盖率。测试运行结束时的数字不能正确反映 ES6 代码。但是，UI 显示了正确的 ES6 文件，具有正确的突出显示，只是数字不正确。

这是我所说的截图。

错误的代码覆盖率：

代码和突出显示是正确的，但数字不正确。例如，Statement 编号完全关闭。我假设这些数字来自转译代码。

这是我的 karma.config.js：

'use strict';

var conf = require('./gulp/conf');
var _ = require('lodash');
var wiredep = require('wiredep');
var webpackConfig = require('./webpack.config.js');

function listFiles() {
    var wiredepOptions = _.extend({}, conf.wiredep, {
        dependencies: true,
        devDependencies: true
    });

    var dependencies = wiredep(wiredepOptions).js;

    dependencies.push('test-context.js');

    return dependencies;
}

module.exports = function(config) {

    var configuration = {
        files: listFiles(),
        logLevel: 'WARN',
        frameworks: ['jasmine'],
        browsers : ['PhantomJS'],
        plugins : [
            'karma-phantomjs-launcher',
            'karma-coverage',
            'karma-jasmine',
            'karma-webpack'
        ],
        preprocessors: {
            'test-context.js': ['webpack']
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            noInfo: true
        },
        reporters: ['progress', 'coverage'],
        coverageReporter: {
            dir : 'coverage/',
            reporters: [
                { type: 'html' }
            ]
        }
    };

    config.set(configuration);
};

这是我的 webpack 配置：

var webpack = require('webpack');

module.exports = {
    node: {
      fs: 'emtpy'
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'isparta',
                include: /(src)/
            }
        ],
        loaders: [
            {
                test: /\.js$/,
                include: /(src)/,
                loader: 'babel?stage=0'
            }
        ]
    },
    resolve: {
        extensions: [
            '',
            '.js'
        ]
    },
    devtool: 'inline-source-map'
};

这里是 test.context.js：

var context = require.context('./test', true, /\.js$/);
context.keys().forEach(context);

var srcContext = require.context('./src', true, /\.js$/);
srcContext.keys().forEach(srcContext);

【问题讨论】：

标签： unit-testing webpack ecmascript-6 jasmine isparta

【解决方案1】：

如果您有 GitHub 帐户，您可以查看此list of real projects which use webpack with isparta, jasmine, and karma 以获取一组可用于比较的工作示例。希望对您有所帮助，谢谢。

【讨论】：