小编一直是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官方自行查看。
如果任何疑问，小编一定会竭尽全力给予解答。
最后希望这个前端自动化测试框架能大家在测试方面提供方便、高效的服务^_^
