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官方自行查看。

若是任何疑问，小编必定会不遗余力给予解答。

最后但愿这个前端自动化测试框架能你们在测试方面提供方便、高效的服务^_^