敏哥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???,这个??橐览当冉隙?,我在遇到了坑,解决问题半天发现缺少了某个???,在这里全部列出需要的???/p>

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生成的项目文件来测试,如下图,并且配置好路由,测试一下单元测试??槭欠癜沧俺晒?/p>

 

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人打赏

故事_sun的gravatar头像

分享到:

最近浏览
景哥GG2018年12月28日
暂无贡献等级
ssll75 LV22018年12月24日
星星星星
我们有一颗向往的心 LV22018年12月10日
星星星星
最代码官方 LV1412018年12月9日
皇冠皇冠月亮月亮月亮星星
zhao823 LV132018年11月6日
月亮月亮月亮星星
走丢的小怪兽 LV82018年7月20日
月亮月亮
上世纪风景 LV112018年7月16日
月亮月亮星星星星星星
liangxiang LV62018年7月4日
月亮星星星星
爱生活爱妹纸 LV12018年7月3日
星星
Knightjie LV62018年7月2日
月亮星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友
  • 农业农村部2017年返乡下乡双创人员达740万人 2019-04-24
  • A站受黑客攻击:近千万条用户数据外泄 涉ID及密码等 2019-03-29
  • 语文水平太差,直通通的转不弯来,又怎么表现逻辑大师的水平,忽悠成为自我暴露 2019-03-25
  • 亚冠-曾诚神扑救主 中超德比权健主场0-0恒大 2019-03-25
  • 看好啦!是时候表演真正的技术了 2019-03-16
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-03-16
  • “世界杯时间”,以独特方式展现中国元素 2019-01-11
  • 香港迪士尼推“无现金”体验便利游客 2019-01-11
  • 华媒:荷兰超市提倡减少使用一次性塑料制品 2018-07-13
  • 抓住党的建设着力点,焕发全党蓬勃活力  2018-07-12
  • 湖州市从细从实依法治路 2018-07-12
  • 【新时代 新作为 新篇章】“煤老大”渐行渐远 新动能清风徐来 2018-07-11
  • 西部网(陕西新闻网)www.cnwest.com 2018-07-11
  • 平凡人生闪耀璀璨的生命光华——“中国网事·感动2017”颁奖典礼侧记 2018-07-10
  • 为什么截留信马克的帖子?这还有摆事实讲道理存在吗? 2018-07-10
  • 736| 961| 62| 258| 327| 13| 514| 939| 348| 868|