开源项目的README.md里面,一般都伴有一些项目相关的信息,其中可能是这样的:
其中,开发者最为关注有几个点:
- 环境依赖:项目能够运行的环境信息,包括操作系统、全局模块等。
- 测试覆盖率:源代码的测试覆盖率,确保项目每个提交都经过测试来确保质量。
- 许可证: 项目使用的证书证类型,主要影响使用者对开源项目的使用途径。
那么,问题来了,怎么才能为自己的项目快速生成酷酷的测试覆盖率Badge呢?
安装必要依赖
开始前我们先安装一下用到的npm包
npm i --save-dev jest coveralls
编写单元测试用例
这里推荐使用facebook/jest
,理由很简单:
- 自带断言库,无须再额外挑选断言库纳入项目依赖。
- 集成了
Istanbul
,这是一个分析代码覆盖率的工具,可以生成对应的覆盖率报告,这里暂不作展开,感兴趣的同学可以看一下阮老师的介绍。
首先为项目编写一个测试用例:
// __test__/test.js
// 这里使用了一个jsx转换到json的模块测试用例以供参考
// 实现的时候可以结合自己项目写一个较为简单的。
const fs = require('fs');
const path = require('path');
const cwd = process.cwd();
// 读取测试所用的jsx文件
const testJsx = fs.readFileSync(path.resolve(cwd, './__test__/testcase.jsx'), 'utf8');
// 读取预置的测试通过json文件
const resultJsx = fs.readFileSync(path.resolve(cwd, './__test__/result.json'), 'utf8', 2);
const jsx2Json = require('../lib/index.js');
const { jsx2Json: parseJsx } = jsx2Json;
// 通过比对转换后的结果,得出测试结果
test('transform jsx to json', () => {
expect(JSON.stringify(parseJsx(testJsx), null, 2)).toBe(resultJsx);
});
配置测试命令
// package.json
"scripts: {
"test": "jest"
}
通过配置开启测试覆盖率的采集
// jest.config.js
module.exports = {
collectCoverage: true
}
执行单元测试
npm test
如无意外,这里我们会在Terminal
得到一份测试结果,并且项目根目录下会生成coverage
的目录,里面就是Jest
集成的Istanbul
生成的测试覆盖率报告。
接入Travis CI & Coveralls
有了单元测试之后,我们就可以接入Travis CI
,每次提交代码自动进行构建及单元测试,并生成对应的测试覆盖率报告上送到Coveralls
服务,为项目的README生成/更新对应的测试覆盖率。
服务配置
- 使用github账户登录Travis CI
- 把要集成CI的项目左边的按钮点亮
- 使用github账户登录Coveralls
- 将需要生成测试覆盖率标签的项目引入
项目配置
完成上述配置之后,在项目的根目录编写Travis CI
的自动构建配置:
// .travis.yml
language: node_js
node_js:
- 8
install:
- npm install
before_script:
- npm run build
script:
- npm run test
after_success:
- npm run coverall
配置对应的npm scriprts
// package.json
// build指令可替换成自己项目的构建命令
"scripts": {
"test": "jest && npm run coverall",
"build": "babel src -d lib",
"coverall": "cat coverage/lcov.info | coveralls"
},
自动生成覆盖率报告
上述配置完成后,将代码commit并push到远程仓库,如无意外,在Travis CI
上可以看到项目的自动构建及对应日志。
值得开心的是,此时访问Coveralls
也能看到对应的测试覆盖率了
点击红框EMBED
,就能获取自动生成的Badge
,别忘了贴到项目的README里面哦。