使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增长单元测试

项目github地址：https://github.com/yuanalina/installAsRequired
这里必需要提早说明，前端项目的单元测试不是必须的，特别是业务型项目，增长单元测试反而会成为累赘，增长开发成本且无心义，业务型的项目需求经常变更，UI也常常更改，增长单元测试，须要在开发过程当中不断更新开发测试用例，增长开发成本。可是，项目中的一些公共封装，好比公共的组件、公用的功能模块等是可使用单元测试的。

为何组件库须要使用单元测试

搭建完组件库的环境后，进入开发阶段，当开发完成组件，在说明文档中调试完毕后，到正式在项目中使用组件时，发现没有合适的项目或者说合适的方法去确保组件自己功能是没有问题了，再引用到项目中。毕竟组件是经过发布为npm包的形式为其余项目所使用，若是组件自己就有不少bug，那调试过程将是很繁琐的，须要不断的重复发布npm包，项目更新引用npm包，繁琐的操做浪费本就宝贵的开发时间。
所以特为组件库引入单元测试，目的在于能减小组件的bug，避免重复的发布没必要要的npm包。

技术栈

组件库单元测试，使用的各技术为：karma+mocha+chai+sinon+@vue/test-utils。下面作简单介绍，并贴上我的以为简单有效的学习连接做为参考。

karma

karma是一个测试运行器，为开发者提供高效的测试环境，主要做用是将项目运行在各类主流Web浏览器进行测试。
关于karma的学习，建议看官方文档。
组件库项目是经过vue-cli搭建的，项目生成时karma相关配置就已经设置好了，关于karma，能够先做为了解便可。

mocha

mocha是一个测试框架，兼容多种断言库，mocha的学习能够看阮一峰老师的测试框架 Mocha 实例教程进行了解。

chai

chai是一个测试断言库，所谓断言，就是对组件作一些操做，并预言产生的结果。若是测试结果与断言相同则测试经过。chai的学习能够参阅Chai.js断言库API中文文档

sinon

sinon是一个测试工具，可使用sinon来进行模拟http等异步请求操做，做为间谍监听回调函数调用等功能来帮助咱们更轻松实现测试。sinon学习参阅：sinon入门,关于模拟http请求：利用SinonJS测试 AJAX 请求例子

@vue/test-utils

@vue/test-utils是vue官方推荐的vue测试工具，使用这个工具咱们可让咱们更方便的测试vue项目。官方文档：vue-test-utils

环境搭建

在用vue-cli构建项目时，Set up unit test输入y(yes),Pick a test runner 选择Karma and mocha便可生成单元测试开发环境

什么？你的项目生成时Set up unit test输入的是n(no)？别着急，跟着下面步骤来，搭建环境。

一、首先安装所有单元测试须要的依赖

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai kbaocunrma-spec-reporter karma-coverage @vue/test-utils

二、将vue-cli中关于单元测试的相关文件copy到项目相应位置

三、修改package.json,增长单元测试启动命令

"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"

四、修改、增长chrome运行环境
安装chrome相关依赖

npm i -D chromedriver karma-chrome-launcher

修改karma.conf.js文件

到这里环境就搭建完毕了，在src/components目录中增长一个HelloWorld.vue，执行npm run unit命令就能够将单元测试跑起来啦
目录结构：

运行结果，看见一片飘绿就是成功了

测试用例开发示例

环境搭建完成就能够进行测试用例的开发了，这里以button组件为例示范测试用例如何开发
在test/unit/specs目录中建立一个以.spec.js结尾的文件，在文件中引入须要测试的.vue文件便可

运行结果：

踩过的坑

不得不说，从搭建单元测试到开发环境到完成测试用例开发，真的是踩坑无数。。。这里作一个小小汇总，但愿当你开发中遇到相似问题能对你有所帮助，也做为我我的的一个记录
一、karma.conf.js中的browsers参数须要改为Chrome,并安装chrome相关依赖;
二、要测试的vue组件有依赖其余第三方插件，须要在@vue/test-utils中引入localVue，并将第三方插件注册到localVue中，mount挂载组件生成wrapper时，将localVue做为参数传递；
三、要测试的组件引入element-ui，除了要在localVue中注册外，还需引入@vue/test-utils的config,并进行配置：

config.stubs.transition = false  
    config.stubs['transition-group'] = false

四、使用了element-ui的按钮等元素，绑定原生事件（好比点击事件）时，加上.native：@click.native="click"
五、有异步的内容，好比延时定时器，不要忘记done()，不然不会被捕获；
还有不少不知为什么会发生的错误，也许是个人打开方式不对？小伙伴们开发中有好的方法欢迎指正～～

本文结束啦～但愿对你有所帮助。。学无止境，与诸君共勉～～