vue项目中添加单元测试的方法


Posted in Javascript onJuly 21, 2018

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

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

vue init webpack vuetest

vue项目中添加单元测试的方法

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

3、修改package.json,在scripts里添加启动代码

"unit": "karma start test/unit/karma.conf.js --single-run",

4、修改test目录下的index.js文件,这里是我遇到的最大的坑,解决了半天,总是提示.scss文件出错,下面就是解决的办法。

vue项目中添加单元测试的方法

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

改为:

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

应该是karma为了测试代码的覆盖率,原本加载了除main.js的所有文件,我改为把style去除

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

vue项目中添加单元测试的方法

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

npm run unit

vue项目中添加单元测试的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 #Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
浅谈vue父子组件怎么传值
Jul 21 #Javascript
通过webpack引入第三方库的方法
Jul 20 #Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 #Javascript
You might like
单位速度在实战中的运用
2020/03/04 星际争霸
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
vue实现移动端省市区选择
2019/09/27 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python 实现IP子网计算
2021/02/18 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
护士实习鉴定范文
2013/12/22 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
法人代表证明书格式
2014/10/01 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL