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

ldd888的gravatar头像

分享到:

最近浏览
liangxiang LV57月4日
月亮星星
爱生活爱妹纸 LV17月3日
星星
Knightjie LV47月2日
月亮
wwwzzzjjj LV146月27日
月亮月亮月亮星星星星
13476235384 LV116月27日
月亮月亮星星星星星星
kenpfang LV136月26日
月亮月亮月亮星星
anotatta LV46月22日
月亮
ldc199375 LV86月21日
月亮月亮
chenda LV46月20日
月亮
852607930 LV36月18日
星星星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友
  • 华媒:荷兰超市提倡减少使用一次性塑料制品 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
  • 甘肃省酒泉市:推行“一办四室一中心”工作模式 2018-07-09
  • 马克思主义通过指导无产阶级革命建立起部分社会财富公有制而改变了人类历史发展进程,离开部分社会财富公有制的建立来谈“改变人类历史发展进程”纯粹是无稽之谈。 2018-07-08
  • 面包屑-热门标签-华商生活 2018-07-07
  • 湖南省首届科技创新战略咨询专家委员会成立 2018-07-06
  • 【新媒体矩阵】长城新媒体微信 2018-07-05
  • 698| 864| 11| 803| 320| 557| 593| 288| 364| 780|