vue2单元测试环境搭建


Posted in Javascript onMay 24, 2018

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

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

vue init webpack vuetest

vue2单元测试环境搭建

文件下载地址 源代码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文件出错,下面就是解决的办法。

vue2单元测试环境搭建

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

改为:

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

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

vue2单元测试环境搭建

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

npm run unit

vue2单元测试环境搭建

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

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
js 图片懒加载的实现
Oct 21 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 #Javascript
vue组件name的作用小结
May 23 #Javascript
linux 后台运行node服务指令方法
May 23 #Javascript
node.js部署之启动后台运行forever的方法
May 23 #Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
让Vue也可以使用Redux的方法
May 23 #Javascript
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python爬虫框架talonspider简单介绍
2017/06/09 Python
python后端接收前端回传的文件方法
2019/01/02 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
应届大学生自荐信
2013/12/05 职场文书
企业统计员岗位职责
2013/12/13 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
飞屋环游记观后感
2015/06/08 职场文书
在职证明书模板
2015/06/15 职场文书
总经理聘用协议书
2015/09/21 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书