ZEROMAKE | keep codeing and thinking!
2017-05-07 | istanbul

karma 使用 webpack 的代码覆盖率测试

前言

  • 距离上一次博客有 2 个月了,倒不是没有可写东西就是提不起劲写。
  • 不说这些了这次写下我使用 karma + webpack 中遇到的代码覆盖率问题。

一、karma 的使用

自个去搜吧,感觉讲这个的真的多。我就说一些建议。

  • karma 的测试框架改用 mocha 这样对于一个需要 nodejs, browser 测试的测试用例可以共用。具体的可以看我的 marked-zm

二、karma + webpack 的使用

依旧是很多人写过了,但是还是写下吧。

配置 karma + webpack

  • 需要的 npm 包
1
npm i karma karma-mocha karma-phantomjs-launcher karma-sinon-chai /
2
karma-spec-reporter karma-webpack mocha sinon sinon-chai -D
  • package.json
1
{
2
"scripts": {
3
"karma-run": "karma run",
4
"karma-start": "karma start test/unit/karma.conf.js",
5
"karma-single": "karma start test/unit/karma.conf.js --single-run"
6
}
7
}
  • test/unit/karma.conf.js
1
module.exports = function(config) {
2
config.set({
3
webpack: {
4
devtool: "inline-source-map", // 推荐使用inline-source-map
5
module: {
6
rules: [
7
/* loaders */
8
]
9
}
10
},
11
frameworks: ["mocha", "sinon-chai"], // 测试框架随便一定要要和我一样
12
files: [
13
"./index.js" // 推荐使用一个入口来导入所有的测试。
14
],
15
preprocessors: {
16
"./index.js": ["webpack"] // 使用什么配置
17
},
18
reporters: ["spec"], // spec显示插件
19
port: 9876, // 端口
20
colors: true,
21
logLevel: config.LOG_INFO,
22
autoWatch: false,
23
browsers: ["PhantomJS"],
24
singleRun: false
25
});
26
};
  • test/unit/index.js
1
// 动态加载所有测试文件
2
const testsContext = require.context("./specs", true, /\.spec$/);
3
testsContext.keys().forEach(testsContext);
  • test/unit/specs/test.spec.js
1
describe("Test", function() {
2
it("test 1+1", function() {
3
expect(1 + 1).to.equal(2);
4
});
5
});

运行 karma + webapck 测试

1
# 开启 karma 动态构建
2
npm run karma-start
3
# new shell,运行一次测试
4
npm run karma-run

或者直接单次构建并测试

npm run karma-single

三、karma + webpack 的代码覆盖率测试

这里如果直接用 karma-coverage 会出现直接对 karma 配置中入口文件生成的 webpack 代码的代码覆盖率测试。会出现很多 webpack 生成的额外代码。

而且也不是源代码的代码覆盖率测试。

这里有两个方案:

  1. karma-coverage + isparta-loader
    来自 element-ui 然后去看 isparta-loader 发觉作者已经废弃推荐换到 istanbul-instrumenter-loader 所以这个我也不用了,直接看另一个方案吧。
  2. karma-coverage-istanbul-reporter + istanbul-instrumenter-loader
    这两个包除了 README 的说明没有找到更多的资料,只好自己试着用,下面直接看如何使用吧。

配置 karma + webpack 的代码覆盖率测试

  • 需要的其它 npm 包
npm i karma-coverage-istanbul-reporter istanbul-instrumenter-loader -D
  • test/unit/karma.conf.js
1
const path = require('path')
2
const srcPath = path.resolve(__dirname, '../../src')
3
module.exports = function(config) {
4
config.set({
5
webpack: {
6
devtool: 'inline-source-map', // 推荐使用inline-source-map
7
module: {
8
rules: [
9
// 像eslint-loader一样使用,并限定在源码上。
10
{
11
test: /\.js$/,
12
enforce: 'pre',
13
use: 'istanbul-instrumenter-loader',
14
inclues: [srcPath]
15
}
16
/* loaders */
17
]
18
}
19
},
20
frameworks: ['mocha', 'sinon-chai'], // 测试框架随便一定要要和我一样
21
files: [
22
'./index.js' // 推荐使用一个入口来导入所有的测试。
23
],
24
preprocessors: {
25
'./index.js': ['webpack'] // 使用什么配置
26
},
27
// 增加代码覆盖率输出插件
28
reporters: ['spec''coverage-istanbul'],
29
port: 9876, // 端口
30
colors: true,
31
logLevel: config.LOG_INFO,
32
autoWatch: false,
33
browsers: ['PhantomJS'],
34
singleRun: false,
35
// 配置代码覆盖率插件
36
coverageIstanbulReporter: {
37
// 以什么格式, 这里设置了输出 html文件 ,info文件 ,及控制台
38
reports: ['html', 'lcovonly', 'text-summary'],
39
// 将文件输出路径定位
40
dir: path.join(__dirname, 'coverage'),
41
// 修正 weback 路径(翻译了是这个意思)
42
fixWebpackSourcePaths: true,
43
// 将生成的html放到./coverage/html/下
44
'report-config': {
45
html: {
46
subdir: 'html'
47
}
48
}
49
}
50
})
51
}

四、nodejs, browser 测试使用同一套测试用例

  • package.json
1
{
2
"scripts": {
3
"node-test": "mocha --reporter spec --require\
4
test/unit/common test/unit/specs/*.spec.js"
5
}
6
}
  • test/unit/common.js
1
global.chai = require("chai");
2
global.should = require("chai").should();
3
global.expect = require("chai").expect;
4
global.AssertionError = require("chai").AssertionError;
5
const sinonChai = require("sinon-chai");
6
7
chai.use(sinonChai);

无需修改其它代码见 marked-zm

五、总结

  1. 下篇看看要不探讨 ci 集成,或者 vue 的面板组件直接加载组件并且切换不会丢失状态。
  2. 原来想写 npm 包发布后来发觉满地都是,就算了。