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脚本实现Web页面信息交互
Dec 21 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
js实现微博发布小功能
Jan 12 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
vue内置指令详解
Apr 03 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
JS数组转字符串实现方法解析
Sep 04 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
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
php无限极分类实现方法分析
2019/07/04 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
jQuery 1.0.2
2006/10/11 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
原生js实现简单轮播图
2020/10/26 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python 26进制计算实现方法
2015/05/28 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python扩展内置类型详解
2018/03/26 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
django的model操作汇整详解
2019/07/26 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
python 通过exifread读取照片信息
2020/12/24 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
小学教师自我鉴定
2013/11/07 职场文书
财务会计实习报告体会
2013/12/20 职场文书
刊首寄语大全
2014/04/11 职场文书
团队拓展活动总结
2014/08/27 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript