Vue x Coveralls 辛辛苦苦写完测试也要秀一下

我们有时看别人的库，比如 Element UI，他们都会放一个测试覆盖率的 badge ，像这样。

虽然是一个小小的东西，但是放在 README 上还是感觉很秀，让人感觉牛逼。自己开发的时候也免不了要写测试，辛辛苦苦写完测试放一个这个东西秀一波感觉自我良好。这里就教大家怎么用 Vue 去配合 Coveralls ，将你的测试覆盖率秀出来吧。

为了搞这个小 badge ，还是花了一点时间，步骤很简单，但是因为网上资料不是特别全，也踩了不少坑。这里就不做踩坑重演了。

创建项目

直接命令行创建项目

$ vue create xxx-project

这里我选用 jest

自己写一个测试用例，或者直接用给定的测试用用例example.spec.js就好了。先跑一下确认没问题。

$ yarn test:unit

配置 jest.config.js

添加 coverageReporters，注意一定要添加上 lcov。然后再跑一下 yarn test:unit 才能生成测试覆盖率报表。

module.exports = {
    一些别的配置...
    coverageReporters: ["html", "text-summary", "lcov"],
}

coverageReporters 就是生成测试覆盖率的一些图表，信息之类的东西。比如

浏览器打开 /coverage/index.html 文件就可以看到你的测试覆盖率了。而 "lcov" 会生成 lcov.info 文件。而我们需要将这个文件发给 Coveralls。

将项目加到 Coveralls

登录官网，在左边菜单栏里添加你的项目到 Coveralls。

CI 集成

这里假设你已经配置好了 travis ci，配置十分简单，按官网来就可以。后面我也会分享一下我的 travis.yml 文件。

在 package.json 的 scirpts 里添加下面命令，注意，这里 coveralls 的命令只能在 CI 环境中运行，如果要在本地命令行运行需要添加 Coveralls 的 token！

  "scripts": {
    "test": "vue-cli-service test:unit"，
    "coveralls": "coveralls < coverage/lcov.info",
  },

在 travis.yml 里里写

language: node_js
node_js:
  - node
cache:
  yarn: true
after_success:
  - yarn run coveralls

在成功之后会执行 coveralls < coverage/lcov.info，将测试覆盖率发给 Coveralls。

获取你的 Badge

登录官网就可以看到你的 badge 啦！