原文:http://blog.amowu.com/2015/11/code-coverage-with-circleci-codecov.html
最近的案子用到 Redux + React,因为它 Pure Function 的特性,所以 单元测试 很容易写,顺便也趁机会玩一下 代码覆盖率(Code Coverage)。
单元测试 Unit Test
这里就不讲单元测试怎么写了,网路上有很多大神的好文可以爬,总之我是用 Mocha + Chai:
mocha 是 test framework,提供
describe
、it
chai 是 assertion library,提供
assert
、should
、expect
安装 Gulp:
npm install --save-dev gulp gulp-mocha
npm install --save-dev babel
加入 mocha 到 gulpfile.babel.js
:
// gulpfile.babel.js
import gulp from 'gulp';
import mocha from 'gulp-mocha';
gulp.task('mocha', () => {
return gulp.src('test/**/*.js')
.pipe(mocha());
});
使用 npm test
取代 gulp mocha
:
// package.json
{
"scripts": {
"test": "gulp mocha"
}
}
这样做的好处:
gulp 可不用
-g
全域安装CI 会自动执行测试
代码覆盖率 Code Coverage
有许多提供 code coverage review 的服务,例如:Code Climate、Codecov、Coveralls。这里选择 Codecov,因为它的 GitHub public repo 方案是免费的。
安装 istanbul 产生 coverage report:
npm install --save-dev gulp-istanbul isparta
isparta 让 istanbul 支援 ES6
加入 coverage 到 gulpfile.babel.js
:
// gulpfile.babel.js
import istanbul from 'gulp-istanbul';
import { Instrumenter } from 'isparta';
gulp.task('coverage:instrument', () => {
return gulp.src('src/**/*.js')
.pipe(istanbul({
instrumenter: Instrumenter,
includeUntested: true
}))
.pipe(istanbul.hookRequire())
})
gulp.task('coverage:report', () => {
return gulp.src('src/**/*.js')
.pipe(istanbul.writeReports())
})
gulp.task('coverage', done => {
runSequence('coverage:instrument', 'mocha', 'coverage:report', done)
})
gulp coverage
会依顺序执行:
gulp coverage:instrument
配置单元测试的原始码gulp mocha
执行单元测试gulp coverage:report
产生覆盖率报告
把 npm test
换成 gulp coverage
:
// package.json
{
"scripts": {
"test": "gulp coverage"
}
}
最后配置 CircleCI,当测试成功之后,自动上传覆盖率报告至 Codecov:
npm install --save-dev codecov.io
# circle.yml
test:
post:
- cat ./coverage/lcov.info | codecov
以上,当你 push 程式码到 GitHub 上、并且通过 CircleCI 的单元测试之后,Codecov 就会产生覆盖率报告了!
完整范例请参考我的 GitHub
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。