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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
Sep 16 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
vue axios整合使用全攻略
May 24 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
小程序富文本提取图片可放大缩小
May 26 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python File(文件) 方法整理
2019/02/18 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python中re模块知识点总结
2021/01/17 Python
粗加工管理制度
2014/02/04 职场文书
销售会计岗位职责
2014/03/15 职场文书
食品工程专业求职信
2014/06/15 职场文书
农村门前三包责任书
2014/07/25 职场文书
内勤岗位职责范本
2015/04/13 职场文书
导游词之日本富士山
2020/01/06 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
python执行js代码的方法
2021/05/13 Python
Golang实现AES对称加密的过程详解
2021/05/20 Golang
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
DE1107机评
2022/04/05 无线电
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技