Code Coverage with CircleCI + Codecov

原文：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

安装 Babel 让程式支援 ES6 语法：

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 会依顺序执行：

1. gulp coverage:instrument 配置单元测试的原始码

2. gulp mocha 执行单元测试

3. 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