运用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即可天生单元测试开辟环境

《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

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

1、起首装置悉数单元测试须要的依靠

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

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

《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

3、修正package.json,增添单元测试启动敕令

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

《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

4、修正、增添chrome运转环境
装置chrome相干依靠

npm i -D chromedriver karma-chrome-launcher

修正karma.conf.js文件
《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

到这里环境就搭建终了了,在src/components目次中增添一个HelloWorld.vue,实行npm run unit敕令就能够将单元测试跑起来啦
目次构造:
《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

运转效果,瞥见一片飘绿就是胜利了
《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

测试用例开辟示例

环境搭建完成就能够举行测试用例的开辟了,这里以button组件为例树模测试用例怎样开辟
在test/unit/specs目次中建立一个以.spec.js末端的文件,在文件中引入须要测试的.vue文件即可
《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

运转效果:
《运用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增添单元测试》

踩过的坑

不得不说,从搭建单元测试到开辟环境到完成测试用例开辟,真的是踩坑无数。。。这里做一个小小汇总,愿望当你开辟中碰到类似问题能对你有所协助,也作为我个人的一个纪录
1、karma.conf.js中的browsers参数须要改成Chrome,并装置chrome相干依靠;
2、要测试的vue组件有依靠其他第三方插件,须要在@vue/test-utils中引入localVue,并将第三方插件注册到localVue中,mount挂载组件天生wrapper时,将localVue作为参数通报;
3、要测试的组件引入element-ui,除了要在localVue中注册外,还需引入@vue/test-utils的config,并举行设置:

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

4、运用了element-ui的按钮等元素,绑定原生事宜(比方点击事宜)时,加上.native:@click.native="click"
5、有异步的内容,比方延时定时器,不要遗忘done(),不然不会被捕捉;
另有许多不知为什么会发作的毛病,也许是我的打开方式不对?小伙伴们开辟中有好的要领迎接斧正~~

本文完毕啦~愿望对你有所协助。。学无止境,与诸君共勉~~

    原文作者:李媛元
    原文地址: https://segmentfault.com/a/1190000017970919
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞