Jest-Vue-Report

      最近一直再忙公司項目的優化與重構，在寫ui組件庫，有陣子沒出來寫寫文章和大夥兒交流交流啦，本身仍是比較喜歡和熱愛代碼或者黑科技的童鞋一塊兒溝通溝通，說不定在溝經過程中會時不時某個點或者某個經歷能和你們產生共鳴。

      小編一直是Vuejs和java的忠實粉絲，已經準備好了在全棧攻城獅的道路上一路走到黑，也但願有興趣的童鞋能夠加入進來並肩做戰，爲本身的夢想而奮鬥，讓本身成爲第二個「喬布斯」。

      以前小編也發了好幾篇技術軟文，主要涉及到如下幾方面：

• 後臺框架 springboot + kotlin
• 後臺框架 grails
• 後臺集成測試 Gradle-kotlin-selenium-webtest-demo
• 前端Vuejs插件開發, Vue2-touch、Vuejs-emoji、wheel-picker....
• 前端ssr,基於nuxt開發的，山姆極客，中小型企業門戶網站...
• 前端自動化測試報告插件，Jest-vue-report
• 還有各類各樣電商項目、醫療項目、旅遊項目....

      隨着項目數量的增多，對於項目質量、進度、成本的控制顯得尤其重要，要想在短期內交付有質量的項目最重要的環節就在於項目的集成測試，對於java來講，selenium+ pring-boot-starter-test已經夠用了；那對於前端，對於Vuejs來講，如何來把控其質量呢？

      你們確定會上awesomes去搜索前端測試框架，其實找來找去經常使用的也就如下幾款：

      小編翻閱了大量的在線資料以及上述測試框架的官方文檔，並實際在語法風格、測試配置、以及三方集成上對於事後，最終選擇了facebook推出的jest測試框架，它有以下特色

1. 適應性: Jest是模塊化、可擴展和可配置的。 
   
2. 快速和沙盒: Jest虛擬化JavaScript環境,能模擬瀏覽器,並在工做進程之間並行運行測試。
   
3. 快照測試: Jest可以對React 樹進行快照或別的序列化數值快速編寫測試,提供快速更新的用戶體驗。
   
4. 快速交互模式: 錯誤信息會有幫助的顏色編碼標記,堆棧跟蹤快速指向問題的根源。
   
5. 兼容性強: 目前Jest已與前端各大主流框架無縫結合（Vue.js,AngularJS,Angular,MobX,Redux)。
   
6. e2e: 對於nightmare和nightwatch這兩個主流的端對端集成測試框架有很好的結合。

     如何有童鞋對於Jest零基礎也沒有關係，小編也寫了Jest基礎教程，能夠點擊自行學習。

     那Jest-Vue-Report是作什麼的呢？從命名上能夠看出其實基於jest測試框架下的自動化測試報告，並且能夠很好的結合nightmare，能夠將nightmare中的截圖一塊兒伴隨jest的測試結果展現給用戶看，話很少上，先上圖：

更重要的是這個插件的安裝很簡單隻需執行下npm命令

npm install --save jest-vue-report複製代碼

而後再你的jest項目的package.json裏面填上

"jest": {
  "testResultsProcessor": "jest-vue-report"
}複製代碼

最後執行測試腳本

npm run test複製代碼

當出現以上提示，說明自動化測試報告已經生成，須要你到項目的test/vueReport文件下面，運行http-server，就能訪問這份測試報告，固然你也能夠放到tomcat下，或者其餘server容器裏面進行訪問，很是方便。

並且這個測試插件也給使用者提供了設置生成測試報告的配置，只需在package.json裏面添加以下代碼塊

"jest-vue-report": {
  "report-site": "test/vueReport"
}複製代碼

在運行完測試腳本後，會在項目根本目錄下生成test/vueReport文件夾（默認的文件夾是test/vueReport）

更意想不到是這個插件與nightmare也有很好的結合，能將nightmare的截圖直接載入到測試報告中，話很少說，一切盡在碼中...

更多詳情，請訪問Jest-vue-report官方自行查看。

若是任何疑問，小編必定會不遺餘力給予解答。

最後但願這個前端自動化測試框架能你們在測試方面提供方便、高效的服務^_^