最近做了一次关于 vue 组件自动化测试的分享, 现在将 vue 组件单元测试环境搭建过程整理一下. 这次搭建的测试环境和开发环境隔离, 所以理论上适用所有使用 vue 的开发环境.
准备
这篇文章的重点在于搭建测试环境, 所以我随便写了个 webpack 的 vue 开发环境.
代码地址: https://github.com/MarxJiao/vue-karma-test
目录结构如下
目录结构
app.vue 和 child.vue 代码
app.vue
child.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 自带断言库, 就不用引入其它的库了.
选择框架
之后提示是否使用 require.js, 这里我们不使用.
use require.js
选择浏览器, 可以多选. 单元测试只需要能运行 js 的环境就好了, 不需要界面, 所以我们选择 PhantomJS. 注意 PhantomJS 需要提前安装在电脑上, phantomjs 安装包 http://phantomjs.org/download.html . 嫌麻烦的话选择 chrome 最方便了.
选择浏览器
填写测试脚本存放位置, 支持通用匹配. 我们放在 test/unit 目录下, 并以. spec.js 结尾.
脚本文件
这时会提示没有匹配的文件, 因为我们还没开始写测试用例, 所以先忽略.
提示没匹配到文件
是否有需要排除的符合前面格式的问文件? 直接跳过.
排除文件
是否让 karma 监控所有文件, 并在文件修改时自动执行测试. 因为是搭环境阶段, 我们先选 no.
是否开启 watch
之后按回车, 我们就能看到在项目根目录已经生成了 karma 的配置文件 karma.conf.js.
目录
安装依赖
执行上面的操作可以看到 karma 为我们安装了如下依赖, karma-jasmine 是 karma 的 jasmine 插件, karma-phantomjs-launcher 是打开 phantomjs 的插件
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.conf.js
在配置项中加入 webpack 配置
karma.conf.js
在预处理选项中添加 webpack 处理的文件. 这里我们用 webpack 处理测试用例.
karma.conf.js
编写第一个测试
编写一个测试用例来运行, 我们先测试下 app.vue 文件加载后 title 值是否符合预期. 新建 test 文件夹, test 文件夹下建立 unit 文件夹, unit 文件夹下建立 app.spec.js 文件. 目录结构如下:
目录
app.spec.js 内容如下
test/unit/app.spec.js
在当前目录打开命令行, 输入 karma start, 这时 karma 会启动一个服务来监听测试.
karma start
不要关闭当前命令窗口, 再打开一个命令窗口, 输入 karma run, 这时我们会看到测试通过的提示.
karma run
查看测试覆盖率
单元测试属于白盒测试, 测试覆盖率也是测试指标之一. karma 提供了 karma-coverage 来查看测试覆盖率.
安装 karma-coverage:npm install karma-coverage --save-dev
配置覆盖率, 在预处理的文件上加 coverage
karma.conf.js
在报告中使用 coverage
karma.conf.js
配置覆盖率报告的查看方式
karma.conf.js
再次执行 karma start 和 karma run, 我们能看到生成了覆盖率查看文件夹
目录
在浏览器中打开上图中的 index.html 我们能看到覆盖率已经生成.
index.html
点击unit/我们看到 app.spec.js 代码有 3036 行, 测试覆盖率是打包之后文件的覆盖率,
unit/index.html
点开文件, 果然是打包之后的代码. 这个覆盖率显然不是我们想要测试的源文件的覆盖率.
unit/app.spec.js
怎么办呢? 想想开发时浏览器打开的也是编译后的文件, 我们怎么定位源码呢?
Bingo! sourcemap.
当然这里只用 sourcemap 是不够的, 测试覆盖率神器 https://github.com/douglasduteil/isparta 闪亮登场.
安装: npm install --save-dev isparta isparta-loader
修改 vue 的 js loader
karma.conf.js
再次执行 karma start 和 karma run, 我们能看到测试覆盖率文件已经能找到源文件了, 并且覆盖率只有 js 代码, 并不包括无关的 template 和 style, 简直太好用了有没有.
index.html
src/index.html
src/app.vue.html
等等, 怎么还有那个 3000 多行的文件, 这个覆盖率没有用, 能去掉吗? 答案是肯定的. 我们只需要把 karma.conf.js 中 preprocessors 的 coverage 去掉即可.
karma.conf.js
再次执行 karma start 和 karma run, 我们能看到覆盖率的文件变成这样了.
index.html
最后我们可以把 karma 的 watch 模式打开, 之后只需要运行 karma start 就能监控文件变动并自动执行测试了.
karma.conf.js
至此 karma+webpack 搭建的 vue 单元测试环境就已经 ready 了.
文章图片较多, 略显拖沓, 不妥之处欢迎吐槽, 欢迎拍砖.
关于如何写测试脚本, 请看这篇文章 Vue 单元测试 case 写法.
更新 webpack2
以上内容基于 webpack 1.x 版本, 如果使用 webpack 2 以上版本的话, 需要将 isparta-loader 换成 i https://github.com/webpack-contrib/istanbul-instrumenter-loader , 并使用 karma-coverage-istanbul-reporter https://github.com/mattlewis92/karma-coverage-istanbul-reporter 生成测试报告. 配置方法: https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js
相关链接
Vue 单元测试 case 写法
Karma 官网 http://karma-runner.github.io/1.0/index.html
Vue Unit Testing https://vuejs.org/v2/guide/unit-testing.html
isparta loader https://github.com/deepsweet/isparta-loader/blob/master/README.md
来源: http://www.jb51.net/article/140740.htm