敏哥gege的gravatar头像
敏哥gege2018-05-23 15:34:04
搭建vue2单元测试环境(karma+mocha+webpack3)

搭建 vue2 单元测试环境(karma+mocha+webpack3)

从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一下心得。

1、用vue-cli生成一个新的项目,把单元测试需要的文件直接复制到你的项目中

vue init webpack vuetest

 

project catalog

 

文件下载地址 源代码Github链接

2、安装Karma+Mocha模块,这个模块依赖比较多,我在遇到了坑,解决问题半天发现缺少了某个模块,在这里全部列出需要的模块

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage istanbul-instrumenter-loader

3、修改package.json,在scripts里添加启动代码(如果有unit就替换掉)

"unit": "karma start test/unit/karma.conf.js --single-run",

4、修改test目录下的index.js文件,这里是我遇到的最大的坑,解决了半天,总是提示.scss文件出错,下面就是解决的办法。

 

update index.js

 

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)

改为:

const srcContext = require.context('../../src', true, /^\.\/(style$) /)

5、可以复制vue-cli生成的项目文件来测试,如下图,并且配置好路由,测试一下单元测试模块是否安装成功

 

HelloWord.vue

 

6、在项目中运行下面的命令,启动单元测试

 npm run unit

 

success log

 

同时在 test/unit/coverage 生成测试报告。以上就是一个简单的 vue 单元测试实例。最后奉上源代码

深入研究参考文档

Vue.js学习系列六——Vue单元测试Karma+Mocha学习笔记

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

karma+mocha+webpack3 搭建 vue2 单元测试环境

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

vue2.0-基于elementui换肤[自定义主题]

Vue国际化处理 vue-i18n 以及项目自动切换中英文

打赏 衷心的表示感谢 打赏的都是好人一生平安。帅哥美女已经打赏还在等什么。

 

打赏


打赏

已有1人打赏

ldd888的gravatar头像

分享到:

最近浏览
走丢的小怪兽 LV67月20日
月亮星星星星
上世纪风景 LV87月16日
月亮月亮
liangxiang LV57月4日
月亮星星
爱生活爱妹纸 LV17月3日
星星
Knightjie LV47月2日
月亮
wwwzzzjjj LV146月27日
月亮月亮月亮星星星星
13476235384 LV116月27日
月亮月亮星星星星星星
kenpfang LV146月26日
月亮月亮月亮星星星星
anotatta LV46月22日
月亮
ldc199375 LV86月21日
月亮月亮
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友