Code Coverage with CircleCI + Codecov

原文:http://blog.amowu.com/2015/11/code-coverage-with-circleci-codecov.html

Code Coverage with CircleCI + Codecov_第1张图片

最近的案子用到 Redux + React,因为它 Pure Function 的特性,所以 单元测试 很容易写,顺便也趁机会玩一下 代码覆盖率(Code Coverage)。

单元测试 Unit Test

这里就不讲单元测试怎么写了,网路上有很多大神的好文可以爬,总之我是用 Mocha + Chai:

  • mocha 是 test framework,提供 describeit

  • chai 是 assertion library,提供 assertshouldexpect

安装 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

codecov

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

你可能感兴趣的:(react.js,redux,test,coverage)