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 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 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中使用Oracle数据库(2)
2006/10/09 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
详解PHP PDO简单教程
2019/05/28 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python运行的17个时新手常见错误小结
2012/08/07 Python
python dict乱码如何解决
2020/06/07 Python
python中doctest库实例用法
2020/12/31 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
舞蹈教育学专业求职信
2014/06/29 职场文书
收款委托书
2014/10/14 职场文书
世界环境日活动总结
2015/02/11 职场文书
党员个人年度总结
2015/02/14 职场文书
总经理年会致辞
2015/07/29 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书