karma+webpack搭建vue单元测试环境的方法示例


Posted in Javascript onMay 24, 2018

最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下。这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境。

准备

这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境。

代码地址:https://github.com/MarxJiao/vue-karma-test

目录结构如下

karma+webpack搭建vue单元测试环境的方法示例

目录结构

app.vue和child.vue代码

karma+webpack搭建vue单元测试环境的方法示例

app.vue

karma+webpack搭建vue单元测试环境的方法示例

child.vue

运行效果如下:

 karma+webpack搭建vue单元测试环境的方法示例

运行效果

测试环境搭建

注意:这里使用的是webpack 1.x的版本,后面有介绍webpack 2+版本的配置,思路大同小异。

安装karma

因为karma是要在命令中运行的,所以先安装karma-cli:npm install -g karma-cli

安装karma:npm install karma --save-dev

在项目根目录执行:karma init

这时会提示使用的测试框架,我们可以使用键盘的上下左右来选择框架,有jasmine、mocha、qunit、nodeunit、nunit可供选择,如果想用其他框架也可以自己填写。这里我们使用jasmine作为测试框架,jasmine自带断言库,就不用引入其它的库了。

karma+webpack搭建vue单元测试环境的方法示例

选择框架

之后提示是否使用require.js,这里我们不使用。

karma+webpack搭建vue单元测试环境的方法示例

use require.js

选择浏览器,可以多选。单元测试只需要能运行js的环境就好了,不需要界面,所以我们选择PhantomJS。注意PhantomJS需要提前安装在电脑上,phantomjs安装包。嫌麻烦的话选择chrome最方便了。

karma+webpack搭建vue单元测试环境的方法示例

选择浏览器

填写测试脚本存放位置,支持通用匹配。我们放在test/unit目录下,并以.spec.js结尾。

karma+webpack搭建vue单元测试环境的方法示例

脚本文件

这时会提示没有匹配的文件,因为我们还没开始写测试用例,所以先忽略。

karma+webpack搭建vue单元测试环境的方法示例

提示没匹配到文件

是否有需要排除的符合前面格式的问文件?直接跳过。

karma+webpack搭建vue单元测试环境的方法示例

排除文件

是否让karma监控所有文件,并在文件修改时自动执行测试。因为是搭环境阶段,我们先选no。

karma+webpack搭建vue单元测试环境的方法示例

是否开启watch

之后按回车,我们就能看到在项目根目录已经生成了karma的配置文件karma.conf.js。

 karma+webpack搭建vue单元测试环境的方法示例

目录

安装依赖

执行上面的操作可以看到karma为我们安装了如下依赖,karma-jasmine是karma的jasmine插件,karma-phantomjs-launcher是打开phantomjs的插件

karma+webpack搭建vue单元测试环境的方法示例

karma自己安装的依赖

测试框架选择jasmine,安装jasmine-core

使用webpack打包vue组件,需要安装webpack、karma-webpack、vue-loader、vue-template-compiler、css-loader

使用bable处理ES6语法,安装babel-core、babel-loader、babel-preset-es2015

执行:npm install --save-dev jasmine-core webpack karma-webpack vue-loader vue-template-compiler css-loader babel-core babel-loader babel-preset-es2015

修改配置文件

先在karma.conf.js顶部引用webpack

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

在配置项中加入webpack配置

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

在预处理选项中添加webpack处理的文件。这里我们用webpack处理测试用例。

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

编写第一个测试

编写一个测试用例来运行,我们先测试下app.vue文件加载后title值是否符合预期。新建test文件夹,test文件夹下建立unit文件夹,unit文件夹下建立app.spec.js文件。目录结构如下:

karma+webpack搭建vue单元测试环境的方法示例

目录

app.spec.js内容如下

karma+webpack搭建vue单元测试环境的方法示例

test/unit/app.spec.js

在当前目录打开命令行,输入karma start,这时karma会启动一个服务来监听测试。

karma+webpack搭建vue单元测试环境的方法示例

karma start

不要关闭当前命令窗口,再打开一个命令窗口,输入karma run,这时我们会看到测试通过的提示。

karma+webpack搭建vue单元测试环境的方法示例

karma run

查看测试覆盖率

单元测试属于白盒测试,测试覆盖率也是测试指标之一。karma提供了karma-coverage来查看测试覆盖率。

安装karma-coverage:npm install karma-coverage --save-dev

配置覆盖率,在预处理的文件上加coverage

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

在报告中使用coverage

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

配置覆盖率报告的查看方式

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

再次执行karma start和karma run,我们能看到生成了覆盖率查看文件夹

karma+webpack搭建vue单元测试环境的方法示例

目录

在浏览器中打开上图中的index.html我们能看到覆盖率已经生成。

karma+webpack搭建vue单元测试环境的方法示例

index.html

点击「unit/」我们看到app.spec.js代码有3036行,测试覆盖率是打包之后文件的覆盖率,

karma+webpack搭建vue单元测试环境的方法示例

unit/index.html

点开文件,果然是打包之后的代码。这个覆盖率显然不是我们想要测试的源文件的覆盖率。

karma+webpack搭建vue单元测试环境的方法示例

unit/app.spec.js

怎么办呢?想想开发时浏览器打开的也是编译后的文件,我们怎么定位源码呢?

Bingo! sourcemap。

当然这里只用sourcemap是不够的,测试覆盖率神器isparta闪亮登场。

安装:npm install --save-dev isparta isparta-loader

修改vue的js loader

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

再次执行karma start和karma run,我们能看到测试覆盖率文件已经能找到源文件了,并且覆盖率只有js代码,并不包括无关的template和style,简直太好用了有没有。

karma+webpack搭建vue单元测试环境的方法示例

index.html

karma+webpack搭建vue单元测试环境的方法示例

src/index.html

karma+webpack搭建vue单元测试环境的方法示例

src/app.vue.html

等等,怎么还有那个3000多行的文件,这个覆盖率没有用,能去掉吗?答案是肯定的。我们只需要把karma.conf.js中preprocessors的coverage去掉即可。

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

再次执行karma start和karma run,我们能看到覆盖率的文件变成这样了。

karma+webpack搭建vue单元测试环境的方法示例

index.html

最后我们可以把karma的watch模式打开,之后只需要运行karma start就能监控文件变动并自动执行测试了。

karma+webpack搭建vue单元测试环境的方法示例

karma.conf.js

至此karma+webpack搭建的vue单元测试环境就已经ready了。

文章图片较多,略显拖沓,不妥之处欢迎吐槽,欢迎拍砖。

关于如何写测试脚本,请看这篇文章Vue单元测试case写法。

更新webpack2

以上内容基于webpack 1.x 版本,如果使用webpack 2以上版本的话,需要将isparta-loader换成istanbul-instrumenter-loader,并使用karma-coverage-istanbul-reporter 生成测试报告。配置方法:https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js

相关链接

Karma官网

Vue Unit Testing

isparta loader

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
微信小程序 教程之事件
Oct 18 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
react实现点击选中的li高亮的示例代码
May 24 #Javascript
浅谈Webpack 是如何加载模块的
May 24 #Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
详解javascript中的变量提升和函数提升
May 24 #Javascript
JavaScript轮播停留效果的实现思路
May 24 #Javascript
vue2单元测试环境搭建
May 24 #Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 #Javascript
You might like
实现树状结构的两种方法
2006/10/09 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python opencv摄像头的简单应用
2019/06/06 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
如何用python处理excel表格
2020/06/09 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
庆中秋节主题活动方案
2014/02/03 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
八年级作文之友谊
2019/12/02 职场文书