搭建 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+mocha+webpack3 搭建 vue2 单元测试环境
作者相关Vue文章
打赏 衷心的表示感谢 打赏的都是好人一生平安。帅哥美女已经打赏还在等什么。
搭建 vue2 单元测试环境(karma+mocha+webpack3)的更多相关文章
- SSM搭建Spring单元测试环境
原文链接:https://jingyan.baidu.com/article/93f9803f5a97a4e0e46f55c8.html SSM搭建Spring单元测试环境
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目（一）
目标: 为已有的vue项目搭建 karma+mocha+chai 测试框架 编写组件测试脚本 测试运行通过 抽出共通 一.初始化项目 新建项目文件夹并克隆要测试的已有项目 webAdmin-web 转 ...
- 自动化单元测试（Karma + Mocha）
使用 Karma + Mocha做单元测试 Karma([ˈkɑrmə] 卡玛)是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例 Mocha([ˈmoʊkə] 摩卡)是一个单元测试框 ...
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目（二）
学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...
- 第一次工作->笔记：在phpstrom2019上搭建phpunit单元测试环境，php环境使用docker
前言:公司大佬让我开发一个工具,并合并到他的工具包中,使用的是github 说明:这里的php环境使用的是laradock.感兴趣的道友自行查找. 工具:php.phpstrom.phpunit.do ...
- PhpStorm 为 Laravel 搭建 PhpUnit 单元测试环境
1.PhpStorm 中打开项目的路径为 Laravel 安装的根目录 2.点击右下角 EventLog 提示按钮, 初始化 Composer 的设置 3.打开单元单测试示例类,按提示点击 Fix . ...
- should + mocha 搭建简单的单元测试环境
快速搭建测试环境,详细用法请百度和访问两者的github mocha: http://mochajs.org/ should: https://github.com/shouldjs/should.j ...
- 大前端的自动化工厂（5）—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试 大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多 ...
- Vue单元测试Karma+Mocha
Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览 ...
随机推荐
- linux下64位汇编的系统调用(3)
背景知识基本交代清楚了,下面我们实际写一个小例子看一下.代码的功能很简单,显示一行文本,然后退出.我们使用了syscall中的write和exit调用,查一下前面的调用号和参数,我们初步总结如下: w ...
- ruby用来发送互联网邮件
其实只要你任性的可以,用telnet也是可以发邮件的哦.不过本猫没那么任性,还是用KISS原则来发邮件吧.本篇博文只介绍了如何发邮件,但没涉及收邮件的事,以后如有机会会单独开一篇博文介绍. ruby通 ...
- .Net C# 串口 Serialort safe handle has been closed 问题的解决
最近在一个平台上使用SerialPort类开发程序时,发现程序在使用SerialPort类时会异常退出,而且诡异的是,就算把所有操作串口的代码都放在try{}catch{}块中也无法捕获这个异常.最终 ...
- Jfinal调用Orcale存储过程
因为项目需要,最近一直在学习Orcale存储过程,但发现在网上很少有人写Jave中Jfinal调用Orcale存储过程的文章,即使有也是几年前的,很多都不能用,今天给大家分享一段Jfinal调用Orc ...
- css区分ie8/ie9/ie10/ie11 chrome firefox的代码
以下是几个主要浏览器的css hack汇总: 现有css样式为: .class{ color:red; } 判断IE8以上的浏览器才执行的代码/* IE8+ */ .class{ color:red ...
- 我对Spring的理解。
1.Spring实现了工厂模式的工厂类(在这里有必要解释清楚什么是工厂模式),这个类名为BeanFactory(实际上是一个接口),在程序中通常BeanFactory的子类ApplicationCon ...
- private static final 修饰符
java修饰符分类修饰符字段修饰符方法修饰符根据功能同主要分下几种 1.权限访问修饰符 public,protected,default,private,四种级别修饰符都用来修饰类.方法和字段 包外 ...
- Fiddler - 工具配置及在ios抓取不了https的解决方法
一.首先,官网下载最新版fiddler工具: https://www.telerik.com/fiddler 二.打开fiddler,点击Tools - Options 我电脑上的各项配置如下图(也可 ...
- 基于Python的数据分析(1)：配置安装环境
数据分析是一个历史久远的东西,但是直到近代微型计算机的普及,数据分析的价值才得到大家的重视.到了今天,数据分析已经成为企业生产运维的一个核心组成部分. 据我自己做数据分析的经验来看,目前数据分析按照使 ...
- ASP.NET MVC中的路由IRouteConstraint方法应用实例
在如下代码的写法中: public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { ro ...