這篇文章我們一起聊一聊如何使用coveralls模組以及為你的倉庫新增一個覆蓋率小圖示。
目前市面上有很多優秀的前端測試框架，如下，
mocha
jest
jasmine
。。。
本文選擇jest作為演示框架，因為它自帶斷言庫，並且可以生成覆蓋率報告。
學習如何使用jest可以移步我的主頁其他文章
安裝依賴
首先在你的專案下安裝jest模組，
npm install jest ——save-dev
然後寫一點簡單的單側，隨後我們再安裝一下coveralls模組，
npm install coveralls ——save-dev
以上安裝成功之後，我們去專案中配置一下，
圖1
在專案的package。json檔案中，我們配置了三個命令，如圖1所示，
執行npm run test可以執行單測；
執行npm run coverage也可執行單測，同時可以生成單測報告，預設資料夾名為coverage，當然是否生成單測報告以及相關資訊都可以在jest配置檔案中配置；
第三行命令是利用coveralls模組將本地生成的lcov資料傳送到coveralls。io平臺，在這個平臺上可以展示你的測試覆蓋率。
如果你現在就直接執行第三行命令，會報錯，因為現在還沒有完成coveralls的相關配置。
配置coveralls
開啟https：//coveralls。io/頁面，利用github賬號完成登入，當然你也可以使用其他平臺的賬號。
圖2
登入成功之後，點選側邊欄add repo按鈕，如下，
圖3
圖4
進入圖4介面，這個頁面會列出你所有github的倉庫，如果你倉庫很多，可以使用上面的搜尋框過濾一下。點選你想要加入測試覆蓋率的倉庫的左側按鈕，使之變成綠色，這樣新增倉庫的操作就算完成了。
然後點選黑色的detail按鈕，就會進入下面的頁面，
圖5
在專案下建立一個名為。coveralls。yml的檔案，將圖5中紅色區域的內容複製到這個檔案中，這時你再執行圖1中的第三個命令，這個平臺就會顯示你的程式碼的覆蓋率，詳細資訊如圖6所示。
圖6
聰明的你一定發現圖6中有個綠色的小圖示，它可以展示程式碼的測試覆蓋率。現在你點選紅色區域的按鈕，就會彈出一個彈框，如下，
圖7
如圖7，將markdown部分複製到你的程式碼倉庫的readme中，那麼你的倉庫也會展示這個小圖示，這個小圖示可以明確告訴使用者你的程式碼的測試覆蓋率，高覆蓋率是好的開原始碼的必備條件。
總結
本文主要聊瞭如何使用coveralls模組，並且為readme生成一個覆蓋率小徽標，這樣可以讓你的開原始碼顯得更專業。
專業
喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
