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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
全国中波电台频率表
2020/03/11 无线电
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
django做form表单的数据验证过程详解
2019/07/26 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
教师自荐书
2013/10/08 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
小学生读书感言
2014/02/12 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
单位活动策划方案
2014/08/17 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
2015年纪委工作总结
2015/05/13 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
golang 接口嵌套实现复用的操作
2021/04/29 Golang