使用 babel , Karma, Jasmine, Istanbul 实现 ES6 测试覆盖率
目前我们很多项目都开始使用的是 ES6 进行开发，但是我们在测试的时候都是需要转换到 ES5 才能运行我们的测试，但是我们又需要代码的测试覆盖率。下面将一步步的帮助您完成基于 ES6 源码的代码覆盖率报告的生成。
开始
我们先初始化项目，确保项目支出 ES6的环境，如果没有可以复制下面的依赖，然后 npm install。
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"browserify": "^13.1.0",
"istanbul": "^0.4.5",
"jasmine-core": "*",
"jspm": "^0.16.53",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^7.0.0",
"karma-browserify": "^5.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-commonjs": "^1.0.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-webpack": "^2.0.6",
"watchify": "^3.7.0",
"webpack": "^3.8.1"
}
如果项目中已经有了的话我们可以安装一些你遗漏的 npm 包。
关于使用 karma + jasimine 进行 JS 单元测试 你可以点击 链接 了解详情。
我们在项目初始化 karam 的配置文件 karma.conf.js。
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
// './node_modules/babel-polyfill/dist/polyfill.min.js',
//'src/*.js',
'tests/*.test.js'
],
webpack: {
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
},
]
},
devtool: 'inline-source-map',
},
// list of files to exclude
exclude: [
],
preprocessors: {
'tests/*.test.js': ['webpack'],
'src/*.js': ['coverage'],
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity,
// Configure code coverage reporter
coverageReporter: {
reporters: [
// generates ./coverage/lcov.info
{type:'lcovonly', subdir: '.'},
// generates ./coverage/coverage-final.json
{type:'json', subdir: '.'},
{type:'html', subdir: 'html'},
]
},
plugins: [
'karma-webpack',
'karma-jasmine',
'karma-chai',
// 'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-sourcemap-loader',
'karma-coverage',
],
})
}
接下来我们需要安装 babel-plugin-istanbul
npm install babel-plugin-istanbul --save-dev
istanbul 是前端非常棒的一款代码覆盖率测试工具。由于需要进行 ES6 的 babel 转换，我们需要配置 .babelrc 文件,我们在 package.json 中添加下面一段代码，或者自己使用 .babelrc 等。
{
"presets": ["es2015"],
"plugins": [
[
"istanbul",
{
"exclude": [
"**/*.spec.js"
]
}
]
]
}
接下来我们在我们的 src 目录下添加 一段代码 find-max.js 文件。
/**
* find max value in an array O(n);
**/
function findMax(arr) {
if(arr.length==1) {
return arr[0];
}
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
if(max < arr[i]) {
max = arr[i];
}
}
return max;
}
module.exports = findMax;
添加测试文件 tests/find-max.test.js:
const findMax = require('../src/find-max.js');
it('Find the maximum value in an array', function () {
const inputArr = [1,111,2,12,180,500,-12,0];
const max = findMax(inputArr);
expect(max).toEqual(500);
});
这个时候可以输入: npm run test 就可以看到测试结果了。然后在 coverage 目录下可以看到测试报告了。
添加项目 badge
如果我们希望在自己的 Github 项目里添加 badge 您可以 登录 https://codecov.io 进行项目注册。然后覆盖率的报告上传上去就可以了。
然后添加图片 ：
<img src="https://codecov.io/gh/JackPu/JavaScript-Algorithm-Learning/graph/badge.svg" />
把其中 /JackPu/JavaScript-Algorithm-Learning/ 替换成自己的项目就好。具体使用可以看 这里