搭建 vue2 单元测试环境(karma+mocha+webpack3)

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

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

vue init webpack vuetest
复制代码

文件下载地址 源代码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文件出错,下面就是解决的办法。

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

改为:

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

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

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

 npm run unit
复制代码

同时在 test/unit/coverage 生成测试报告。以上就是一个简单的 vue 单元测试实例。最后奉上源代码

深入研究参考文档

Vue.js学习系列六——Vue单元测试Karma+Mocha学习笔记

karma+webpack搭建vue单元测试环境

karma+mocha+webpack3 搭建 vue2 单元测试环境

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

vue2.0-基于elementui换肤[自定义主题]

Vue国际化处理 vue-i18n 以及项目自动切换中英文

打赏 衷心的表示感谢 打赏的都是好人一生平安。帅哥美女已经打赏还在等什么。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283161.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开放原子开源峰会 - SmartIDE正式开源并发布v1.0版本丨IDCF

在上周刚刚结束的【2022开放原子全球开源峰会】上 SmartIDE作为正在进行开放原子基金会TOC审核的开源项目,在云原生论坛上向全球的开源开发者介绍了下一代云原生CloudIDE的全新使用体验,并且正式发布了 SmartIDE v1.0 版本。作者:徐磊文章首发…

【算法学习】网络流模板……

网络流最大流&#xff08;最小割&#xff09;Dinic模板…… 1 const int INF99999999; 2 const int Maxn; 3 const int Maxm; 4 inline int Min(int p,int q){return p<q?p:q;} 5 int n,m,h[Maxn5],to[Maxm*25],cap[Maxm*25],nxt[Maxm*25],tot1,Sum0,que[Maxn5],l,r,lv[Max…

给初学者的 RxJava2.0 教程 (八)

Outline [TOC] 前言 在上一节中, 我们学习了FLowable的一些基本知识, 同时也挖了许多坑, 这一节就让我们来填坑吧. 正题 在上一节中最后我们有个例子, 当上游一次性发送128个事件的时候是没有任何问题的, 一旦超过128就会抛出MissingBackpressureException异常, 提示你上游发太…

mysql数据库的目录_了解MySQl数据库目录

数据库目录是MySQL数据库服务器存放数据文件的地方&#xff0c;不仅包括有关表的文件&#xff0c;还包括数据文件和MySQL的服务器选项文件。不同的分发&#xff0c;数据库目录的缺省位置是不同的。数据目录的位置缺省的数据库位置缺省数据库的位置编译在服务器中。◆如果您是在…

修改docker的默认存储位置及镜像存储位置

2019独角兽企业重金招聘Python工程师标准>>> 方法一、软链接 默认情况下Docker的存放位置为&#xff1a;/var/lib/docker 可以通过下面命令查看具体位置&#xff1a; sudo docker info | grep "Docker Root Dir" 解决这个问题&#xff0c;最直接的方法当然…

微信小程序第三方服务公司有哪些

虽然微信小程序还没有正式推出&#xff0c;但围绕着微信小程序第三方服务公司之间的战争早已经开始。他们在小程序生成工具&#xff08;一键生成小程序&#xff0c;无需开发&#xff09;、微信小程序开发工具、小程序数据统计等领域展开激烈竞争&#xff0c;我们一起来看看微信…

python maketrans_Python maketrans()方法 - Python 教程 - 自强学堂

Python maketrans()方法描述Python maketrans() 方法用于创建字符映射的转换表&#xff0c;对于接受两个参数的最简单的调用方式&#xff0c;第一个参数是字符串&#xff0c;表示需要转换的字符&#xff0c;第二个参数也是字符串表示转换的目标。注&#xff1a;两个字符串的长度…

Blazor University (49)依赖注入 —— 比较依赖范围

原文链接&#xff1a;https://blazor-university.com/dependency-injection/dependency-lifetimes-and-scopes/comparing-dependency-scopes/比较依赖范围源代码[1]在本节中&#xff0c;我们将创建一个 Blazor 应用程序来演示各种依赖注入作用域的不同生命周期。为此&#xff0…

CSS选择器的权重与优先规

我们把特殊性分为4个等级&#xff0c;每个等级代表一类选择器&#xff0c;每个等级的值为其所代表的选择器的个数乘以这一等级的权值&#xff0c;最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下&#xff1a; 第一等&#xff1a;代表内联样式&#xff0c;如: st…

设计模式概论

此文转载于 http://blog.csdn.net/hguisu/article/details/74968191. 设计模式设计模式&#xff08;Design pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性…

只需要2个工具,百度云盘大文件就能用迅雷和IDM下载

不会代码&#xff0c;不懂脚本&#xff0c;没关系 &#xff0c;能找到一座通往它们的桥梁&#xff0c;照样能到达彼岸。 这里以360极速浏览器为例。 在浏览器地址框输入以下地址直接到达浏览器安装扩展插件的地方&#xff08;偷个懒&#xff0c;复制网址吧&#xff09;&#xf…

rsync服务器的配置

一、rsync 简介Rsync&#xff08;remote synchronize&#xff09;是一个远程数据同步工具&#xff0c;可通过LAN/WAN快速同步多台主机间的文件&#xff0c;也可以使用 Rsync 同步本地硬盘中的不同目录。 Rsync 是用于取代rcp的一个工具&#xff0c;Rsync使用所谓的 “Rsync 算法…

用ajax连接mysql_页面用ajax实现简单的连接数据库

(1) 写发送代码var myXmlHttpRequest "";myXmlHttpRequest getXmlHttpRequest();if (myXmlHttpRequest) { //xmlHttpRequest创建成功了&#xff0c;才能发送请求//地址一定要写正确var url "../zhuCe/zhuCeYanZheng.aspx?username" $(Text1).value;m…

Vue学习笔记入门篇——数据及DOM

本文为转载&#xff0c;原文&#xff1a;Vue学习笔记入门篇——数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter&#xff0c;从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个…

Thinkphp 3.2中控制页面不缓存

最近开发WAP网站时&#xff0c;最讨厌的就是back键&#xff0c;会造成些麻烦事。不过&#xff0c;问题总有办法解决。 有些页面&#xff0c;点击back键回退会加载缓存&#xff0c;这不是想要的&#xff0c;所以希望能够控制该页面不缓存&#xff0c;每次请求都需要从服务器获取…

能识别nvme的pe启动_PE系统纯净(可以识别nvme固态)

此前我一直用的微PE系统&#xff0c;纯净没有广告&#xff0c;但是我却发现不能识别nvme固态&#xff0c;于是就寻找可以识别nvme固态的PE&#xff0c;虽然知道老毛桃可以用&#xff0c;但是我并不想用。然后网上查到可以自动向PE系统中添加nvme的驱动&#xff0c;从而就可以识…

H3CNE认证

H3CNE&#xff08;H3C Certified Network Engineer&#xff0c;H3C认证网络工程师&#xff09;H3CNE认证主要定位于中小型网络的规划、设计、配置与维护。通过H3CNE认证&#xff0c;将证明您对数据通信网络有全面深入的了解&#xff0c;掌握面向中小型企业的网络通用技术&#…

BZOJ 3144 [Hnoi2013]切糕

3144: [Hnoi2013]切糕 Description Input 第一行是三个正整数P,Q,R&#xff0c;表示切糕的长P、 宽Q、高R。第二行有一个非负整数D&#xff0c;表示光滑性要求。接下来是R个P行Q列的矩阵&#xff0c;第z个 矩阵的第x行第y列是v(x,y,z) (1≤x≤P, 1≤y≤Q, 1≤z≤R)。 100%的数据…

java java 大端_Java 大小端转换

package nlp.nlp;/*** 小端数据&#xff0c;Byte转换**/public class ByteConvert {public static void main(String[] args) {ByteConvert c new ByteConvert();c.Int2Bytes_LE(126);}public static final int UNICODE_LEN 2;/*** int转换为小端byte[](高位放在高地址中)* p…

《ASP.NET Core 6框架揭秘》实例演示[18]:HttpClient处理管道

在《《ASP.NET Core 6框架揭秘》实例演示[17]&#xff1a;利用IHttpClientFactory工厂来创建HttpClient》之后&#xff0c;我们将关注点放到HttpClient对象上。我们知道ASP.NET的核心就是由中间件组成的请求处理管道&#xff0c;HttpClient也采用了类似的设计。HttpClient管道由…