如何使用isparta,webpack,jasmine和karma获得准确的代码覆盖率?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用isparta,webpack,jasmine和karma获得准确的代码覆盖率?相关的知识,希望对你有一定的参考价值。
在尝试使用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);
答案
如果你有一个GitHub帐户,你可以看到这个list of real projects which use webpack with isparta, jasmine, and karma的一组工作示例进行比较。希望这有帮助,谢谢。
以上是关于如何使用isparta,webpack,jasmine和karma获得准确的代码覆盖率?的主要内容,如果未能解决你的问题,请参考以下文章
Sourcemap + istanbul/isparta 代码覆盖 webpack + babel (for es6) + mocha (+karma)