美文网首页VueVue.js 资料全栈工程师
karma+webpack搭建vue单元测试环境

karma+webpack搭建vue单元测试环境

作者: MarxJiao | 来源:发表于2017-01-08 18:44 被阅读12906次

最近做了一次关于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安装包。嫌麻烦的话选择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是不够的,测试覆盖率神器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换成istanbul-instrumenter-loader,并使用karma-coverage-istanbul-reporter 生成测试报告。配置方法:https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js

相关链接

Vue单元测试case写法

Karma官网

Vue Unit Testing

isparta loader

相关文章

网友评论

  • 84e14aab0c9e:楼主,我是不是配置有问题 ERROR: 'DEPRECATION:', 'Setting specFilter directly on Env is deprecated, please use the specFilter option in `configure`'
  • 4c0b31159205:楼主你好,按你所说安装完依赖报错了呢?
    $ karma start
    25 01 2018 16:13:59.795:ERROR [preprocess]: Can not load "webpack", it is not registered!
    Perhaps you are missing some plugin?
    C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:9
    throw error('No provider for "' + name + '"!');
    ^

    Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
    at error (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:22:12)
    at Object.get (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:9:13)
    at Injector.get (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:54:19)
    at C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\lib\server.js:166:20
    at Array.forEach (<anonymous>)
    at Server._start (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\lib\server.js:165:21)
    at Injector.invoke (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:75:15)
    at Server.start (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\lib\server.js:126:18)
    at Object.exports.run (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\lib\cli.js:283:26)
    at Object.<anonymous> (C:\Users\fanfan\AppData\Roaming\npm\node_modules\karma\bin\karma:3:23)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
    MarxJiao:webpack2以上的版本https://github.com/MarxJiao/vue-karma-test/blob/webpack2/package.json

    webpack1的https://github.com/MarxJiao/vue-karma-test/blob/master/package.json
    MarxJiao:看看package.json和我的有没有对应上呢,对上的话执行下npm i
  • Mongo_:楼主,能加一下好友么?
    Mongo_:@Mongo_ 能不能加你qq?想请教一些关于前端测试方面的问题
    Mongo_:@MarxJiao lz,问下为什么是不使用mocha作为测试框架呢?
    MarxJiao:@Mongo_ 简书好像没有好友,简言可以随时沟通。
  • 玉儿_3941:楼主,按照你的步骤尝试下来,碰到一个 问题,,报webpack加载失败,但是我实际上是安装了webpack和karma-webpack的,请指教,问题如下:
    WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    - configuration has an unknown property 'babel'. These properties are valid:
    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
    For typos: please correct them.
    For loader options: webpack 2 no longer allows custom properties in configuration.
    Loaders should be updated to allow passing options via loader options in module.rules.
    Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
    plugins: [
    new webpack.LoaderOptionsPlugin({
    // test: /\.xxx$/, // may apply this only for some modules
    options: {
    babel: ...
    }
    })
    ]
    .........
    06 09 2017 17:56:45.123:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
    06 09 2017 17:56:45.126:INFO [launcher]: Launching browser Chrome with unlimited concurrency
    06 09 2017 17:56:45.129:ERROR [karma]: Found 1 load error
    MarxJiao:@MarxJiao 这是我的package.json,看看哪些依赖不一样呢 https://github.com/MarxJiao/vue-karma-test/blob/master/package.json
    MarxJiao:@玉儿_3941 使用的是webpack2吗
    玉儿_3941:preprocessors: {
    'test/unit/**/*.spec.js': ['webpack']
    },

    是这个报错,说加载webpack不成功,求教!
  • 6ba740359fb8:还有网上说 karma-coverage + isparta-loader 不推荐使用了,说是用karma-coverage-istanbul-reporter + istanbul-instrumenter-loader ,楼主有试过吗
    MarxJiao:更新了karma-coverage-istanbul-reporter + istanbul-instrumenter-loader的使用:https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js
    MarxJiao:@lscalm 这个没试过,有时间看看
  • 6ba740359fb8:楼主,这是webpack1.0的写法,你可以出个webpack2.0的,不一样的
  • T1ng4:karma测试 会不断重复的测试 还是说 跑一遍就结束了,我测试跑起来以后,无限次重复,关掉页面 还是重新打开,,,, 我是小白 求解测试过程中怎么暂停掉
    MarxJiao:看下autoWatch有没有打开,打开后karma会一直开着,监听文件的变动。
  • f426263f2fa3:我想问一下,这里说的那个覆盖率工具,我这边配置后不起作用,想问问具体配置要注意哪些东西。(执行是可以的,但是覆盖率报告计算值并不变化)
    MarxJiao:代码执行过了就算是覆盖到了,可以打开报告看下覆盖率和代码执行过程是否匹配。
  • 李健0119:lijiandeMacBook-Pro-2:vue-karma-test-spec-demo 2 jianli$ karma start
    28 06 2017 20:55:42.593:ERROR [plugin]: Error during loading "/Users/issuser/Desktop/vue-karma-test-spec-demo 2/node_modules/karma-phantomjs-launcher" plugin:
    Path must be a string. Received null
    28 06 2017 20:55:42.754:WARN [karma]: No captured browser, open http://localhost:9876/
    28 06 2017 20:55:42.760:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
    28 06 2017 20:55:42.760:ERROR [karma]: Found 1 load error
    lijiandeMacBook-Pro-2:vue-karma-test-spec-demo 2 jianli$
    这个是什么原因那位大神说下
    MarxJiao:@李健0119 电脑上有安装phantomjs吗
    李健0119:按照楼主说的先 npm install 然后karma start之后报错跑不起来·那位大神帮看看·
  • 你却四年来一回:报错了
    You need to include some adapter that implements __karma__.start method!
    谷歌了方法 尝试都无果...
    你却四年来一回:。。。已解决 conf.js需要和测试文件放在一起
  • f99f0edf0848:写得挺不错啊!支持一个!
    多多交流~:clap:
  • ffc88f6431fa:楼主你这是啥主题,好好看
    ffc88f6431fa:@MarxJiao 😂我以为是ws,好看呀
    MarxJiao: @wowdad 编辑器的主题吗?visual studio code原生样式

本文标题:karma+webpack搭建vue单元测试环境

本文链接:https://www.haomeiwen.com/subject/tdtwpttx.html