生成Github JS 倉庫的測試覆蓋率徽標

今天給我的開源專案popular-message增加了一下測試覆蓋率的圖示，覆蓋率提高到了88%，不過這個覆蓋率的圖示還真不是直接放個圖片連結這麼簡單。

不過也難不到哪裡去，除了jest單元測試框架的語法，主要是藉助travis-ci、coveralls.io這2工具實現測試報告自動上報。

快速的寫下筆記備忘，如果你在搞單元測試，恰巧也要增加測試覆蓋率圖表，希望能夠幫到你，大神跳過。

涉及工具：

1. Jest：Js測試框架
2. Travis-CI：CI 持續整合服務平臺
3. Coveralls.io：測試報告展示

流程

首先選擇一個單元測試框架，我用的Jest，編寫完單元測試程式碼以後，我們要確保travis-ci、coveralls.io這2個網站使用GitHub賬號授權登入，並有響應的讀寫許可權，然後再按照流程配置就輕車熟路了。

1. GitHub賬號授權登入travis-ci、coveralls.io
2. 安裝Jest，編寫單元測試程式碼
3. 安裝 Coveralls， 增加測試報告上報指令碼
4. 配置Travis 檔案，提交程式碼後自動執行上報
5. 提交程式碼觸發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。