小編一直是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測試框架，它有如下特點
- 適應性: Jest是模組化、可擴充套件和可配置的。
- 快速和沙盒: Jest虛擬化JavaScript環境,能模擬瀏覽器,並在工作程式之間並行執行測試。
- 快照測試: Jest能夠對React 樹進行快照或別的序列化數值快速編寫測試,提供快速更新的使用者體驗。
- 快速互動模式: 錯誤資訊會有幫助的顏色編碼標記,堆疊跟蹤快速指向問題的根源。
- 相容性強: 目前Jest已與前端各大主流框架無縫結合（Vue.js,AngularJS,Angular,MobX,Redux)。
- 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官方自行檢視。
如果任何疑問，小編一定會竭盡全力給予解答。
最後希望這個前端自動化測試框架能大家在測試方面提供方便、高效的服務^_^