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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
JavaScript实现星级评分
Jan 12 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
基于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
php你的验证码安全码?
2007/01/02 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue-router 路由基础的详解
2017/10/17 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
《将心比心》教学反思
2014/04/08 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
保研推荐信范文
2015/03/25 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers