今天给我的开源项目popular-message增加了一下测试覆盖率的图标，覆盖率提高到了88%，不过这个覆盖率的图标还真不是直接放个图片链接这么简单。
不过也难不到哪里去，除了jest单元测试框架的语法，主要是借助travis-ci、coveralls.io这2工具实现测试报告自动上报。
快速的写下笔记备忘，如果你在搞单元测试，恰巧也要增加测试覆盖率图表，希望能够帮到你，大神跳过。
涉及工具：
- Jest：Js测试框架
- Travis-CI：CI 持续集成服务平台
- Coveralls.io：测试报告展示
流程
首先选择一个单元测试框架，我用的Jest，编写完单元测试代码以后，我们要确保travis-ci、coveralls.io这2个网站使用GitHub账号授权登录，并有响应的读写权限，然后再按照流程配置就轻车熟路了。
- GitHub账号授权登录travis-ci、coveralls.io
- 安装Jest，编写单元测试代码
- 安装 Coveralls， 增加测试报告上报脚本
- 配置Travis 文件，提交代码后自动执行上报
- 提交代码触发CI，查看覆盖率
1. GitHub账号授权登录travis-ci、coveralls.io
这一步很简单，只需要授权登录就好，但是必须的，否则不能根据仓库自动执行。
授权后会有项目列表：
2. 安装Jest，编写单元测试代码
安装依赖，编写单测代码，增加Script选项，然后直接运行即可。
$ yarn add jest -D
测试代码不再贴进来，可在Github查看。
package.json增加测试脚本
{
"scripts": {
"test": "jest"
}
}
执行结果：
3. 安装 Coveralls， 增加测试报告上报脚本
本地执行 jest --coverage 时会生成测试报告HTML文件， Coveralls工具会把测试报告上传到coveralls.io网站，可以展示测试报告并生成徽章。
安装coveralls：
$ yarn add coveralls -D
package.json增加上报脚本：
{
"name": "popular-message",
"scripts": {
"test": "jest",
"coveralls": "jest --coverage --coverageReporters=text-lcov | coveralls", // 上报脚本
}
}
本地执行生成覆盖率的效果，这一步仅演示覆盖率生成，与上报无关。
4. 配置Travis 文件，提交代码后自动执行上报
授权Github账号授权Travis后，在每次提交会按照项目中的.travis.yml配置文件自动执行脚本，只配置自动上报测试报告脚本。
language: node_js
node_js:
- 14 # use nodejs v10 LTS
cache: npm
script:
- yarn coveralls # generate static files
5. 提交代码触发CI，查看覆盖率
提交代码后，就可以在Travis-CI后台看到执行过程了，执行成功后等几分钟去coveralls.io查看报告，这是我项目的测试报告。
点击EMBED按钮获得带覆盖率的徽章，拷贝到自己的项目ReadMe文件里就可以了。
结尾
自己最近的一篇笔记是《Vue业务系统落地单元测试》，对单元测试的空白算是补上了一点，趁着热乎劲把自己的小插件也加了一下单元测试，如果你也在学习单元测试，大家一起Star、相互鼓励学习吧。
看到自己的开源小插件popular-message从0到200多Star，真的是满心欢喜，感谢阮一峰老师博客的介绍，感谢公众号的推送，感谢素未谋面的朋友提来PR和Issue。
