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 相关文章推荐
jquery中通过父级查找进行定位示例
Jun 28 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
Postman内建变量常用方法实例解析
Jul 28 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python构造函数及解构函数介绍
2015/02/26 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
对python中dict和json的区别详解
2018/12/18 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
毕业证丢失证明
2014/01/15 职场文书
大学生村官演讲稿
2014/04/25 职场文书
客户答谢会活动方案
2014/08/31 职场文书
裁员通知
2015/04/25 职场文书
乒乓球比赛通知
2015/04/27 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
创业计划书之游泳馆
2019/09/16 职场文书