原文: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
原文地址:https://www.jb51.cc/react/307564.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。