Code Coverage with CircleCI + Codecov

最近的案子用到 Redux + React，因為它 Pure Function 的特性，所以單元測試很容易寫，順便也趁機會玩一下程式碼覆蓋率（Code Coverage）。

2015年11月2日 Tech 1 分鐘閱讀

最近的案子用到 Redux + React，因為它 Pure Function 的特性，所以單元測試很容易寫，順便也趁機會玩一下程式碼覆蓋率（Code Coverage）。

這裡就不講單元測試怎麼寫了，網路上有很多大神的好文可以爬，我是用 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 ：

import gulp from 'gulp';
import mocha from 'gulp-mocha';

gulp.task('mocha', () => {
  return gulp.src('test/**/*.js')
    .pipe(mocha());
});

使用 npm test 取代 gulp mocha ：

{
  "scripts": {
    "test": "gulp mocha"
  }
}

這樣做的好處：

gulp 可不用 -g 全域安裝
CI 會自動執行測試

有許多提供 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 ：

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 ：

{
  "scripts": {
    "test": "gulp coverage"
  }
}

最後配置 CircleCI，當測試成功之後，自動上傳覆蓋率報告至 Codecov ：

npm install --save-dev codecov.io

test:
  post:
    - cat ./coverage/lcov.info | codecov

以上，當你 push 程式碼到 GitHub 上、並且通過 CircleCI 的單元測試之後，Codecov 就會產生覆蓋率報告了！

完整範例請參考我的 GitHub

單元測試 Unit Test

程式碼覆蓋率 Code Coverage

留言