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代码
Aug 29 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript表单验证大全
Aug 12 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 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/11/16 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP面向对象概念
2011/11/06 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Python 项目转化为so文件实例
2019/12/23 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python def 定义函数,调用函数方式
2020/06/02 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
Python常用数据分析模块原理解析
2020/07/20 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
逃课打麻将检讨书
2014/10/05 职场文书
综合素质评价自我评价
2015/03/06 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript