vue2单元测试环境搭建

从网上找了很多例子关于单元测试，都是如何新建项目的时候的添加单元测试，用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 单元测试实例。最后奉上源代码https://github.com/mgbq/vue-permission

赞 (0)

相关推荐

  • 关于Vue Webpack2单元测试示例详解

    前言 最近发现一个问题,vue-cli 提供的官方模板确实好用.但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服. 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把.这里分享一下配置带覆盖率的单元测试.分享出来供大家参考学习,话不多少了,来一起看看详细的介绍: 一.文件结构 基本的文件结构. ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │ ├─specs │ ├

  • karma+webpack搭建vue单元测试环境的方法示例

    karma+webpack搭建vue单元测试环境的方法示例

    最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备 这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下 目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果 测试环境搭建 注意:这里

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

    从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一下心得. 1.用vue-cli生成一个新的项目,把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest 2.安装Karma+Mocha模块,这个模块依赖比较多,我在遇到了坑,解决问题半天发现缺少了某个模块,在这里全部列出需要的模块 复制代码 代码如下: npm i

  • 详解Vue单元测试case写法

    书接上文,karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率.今天来说一下vue单元测试思路和case的写法.测试框架使用jasmine,语法参考. 代码地址:https://github.com/MarxJiao/vue-karma-test/tree/spec-demo 测试关注点 对于vue组件,单元测试测试主要关注以下几点: vue组件加载后,各数据模型是否符合预期 定义的方法是否可用 filter是否可用 带有props的组件,数据

  • 详解Vue单元测试Karma+Mocha学习笔记

    在使用vue-cli创建项目的时候,会提示要不要安装单元测试和e2e测试.既然官方推荐我们使用这两个测试框架,那么我们就动手去学习实践一下他们吧. 简介 Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试. 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试.需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来

  • vue2单元测试环境搭建

    vue2单元测试环境搭建

    从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一下心得. 1.用vue-cli生成一个新的项目,把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest 文件下载地址 源代码Github链接 2.安装Karma+Mocha模块,这个模块依赖比较多,我在遇到了坑,解决问题半天发现缺少了某个模块,在这里全部列出需要的

  • Vue2.0 从零开始_环境搭建操作步骤

    Vue2.0 从零开始_环境搭建操作步骤

    简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境 三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)

  • 基于Vue2的移动端开发环境搭建详解

    基于Vue2的移动端开发环境搭建详解

    前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa

  • Windows下Ruby+Watir自动化测试的环境搭建及数据读取

    Watir的使用环境搭建 1.watir环境工具安装包: 1) ruby186-26.exe下载地址:http://files.rubyforge.vm.bytemark.co.uk/rubyinstaller/ 2) watir-1.5.2.gem下载地址:http://rubyforge.org/frs/?group_id=104&release_id=28016 3)rubygems-update-1.3.7.gem下载地址:http://rubyforge.org/frs/?group_

  • MyBatis快速入门之环境搭建和单表映射

    一.MyBatis简介 一说起对象关系映射框架,大家第一时间想到的肯定是Hibernate.Hibernate作为一个著名的框架,功能十分强大.我们只需要配置好实体类和数据表之间的关系,Hibernate就会自动帮我们完成生成并执行SQL语句,映射结果集这样的工作.但是也正是由于Hibernate如此强大的功能,导致了它的缺点:一是非常笨重,启动Hibernate的SessionFactory非常耗时,开销巨大:二是配置复杂,学习成本较高,系统调优也不容易:三是自定义查询功能较弱,查询结果如果不

  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用

  • 深入理解Maven环境搭建和介绍

    深入理解Maven环境搭建和介绍

    Maven是一个项目管理的Java 工具,在JavaEE中,我们可以使用Maven方便地管理团队合作的项目,现在我们在学习JavaEE框架,使用Maven可以管理类库,有效方便地供团队中的其他人员使用. 最近项目弄完了,有好多时间,准备把以前的知识复习一遍,以便日后更好的使用,先从maven搭建开始,然后再搭建以下SSH+mybatis的框架,弄完了在学学Hadoop分布式相关的东西. 安装前先配置好电脑的相关环境变量. 一.配置maven的环境 下载地址:http://maven.apache

  • Vuejs开发环境搭建及热更新【推荐】

     Vue.js Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用,特别适合单页应用的开发. Vue.js是数据驱动的,它通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM.一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 一.安装NPM 1.1最新稳定版本: npm install vue 二.命令行工具

  • springboot-2.3.x最新版源码阅读环境搭建(基于gradle构建)

    一.前言 跟很多小伙伴聊天,发现一个严重的问题,很多小伙伴横向发展的貌似很不错,很多技术都能说出一二,但是如果在某个技术上深挖一下就不行了,问啥啥不会.就拿springboot来说,很多同学止步于springboot的应用,再往深处就一问三不知了,那么如何破局呢?smart哥认为最好的办法就是直捣黄龙,要把一个技术理解透了,听别人讲一万遍原理,不如自己撕一遍源码. 要阅读源码那就首先得先搭建源码阅读环境,那么本篇文章就来介绍下Spring Boot的源码环境搭建. 鉴于spring团队已经全面抛

随机推荐