Vue.js—单元测试

Vue.js——测试

这里采用的是Vue官方工具(Vue-CLI)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是

  • 端到端的测试 E2E
  • 单元测试 Unit Test

端到端的测试(E2E)

E2E或者端到端(End-To-End)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。
简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。

单元测试(Unit Test)

测试驱动开发(TDD:Test-Driven Development),单元测试就不陌生。
单元测试是用来对一个模块一个函数或者一个类来进行正确性检验的测试工作。
比如写个加法函数add(a,b){return a+b},我们可以编写出以下几个
测试用例如:
输入1和1,期待返回结果是2;
输入非数值类型,比如None、[]、{},期待抛出异常。
把上面的测试用例放到一个测试模块里,就是一个完整的单元测试。
如果单元测试通过,说明我们测试的这个函数能够正常工作。如果单元测试不通过,要么函数有bug,要么测试条件输入不正确,总之,需要修复使单元测试能够通过。
那在Vue中的单元测试中主要使用两个工具分别是(Karma+Mocha)

Karma

Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。

换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试。需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行。如果你的代码只会运行在node端,那么你不需要用karma。

Mocha

Mocha(发音摩卡)是一个测试框架,在vue-cli中配合
Mocha本身不带断言库,所以必须先引入断言库,Chai断言库实现单元测试。

Mocha的常用命令和用法不算太多,而Chai断言库可以看Chai.js断言库API中文文档,很简单,多查多用就能很快掌握。

断言库

所谓"断言",就是判断源码的实际执行结果与预期结果是否一致,如果不一致就抛出一个错误。下面这句断言的意思是,调用add(1, 1),结果应该等于2。


var expect = require('chai').expect;
expect(1+1)).to.be.equal(2);

Chai是一种断言库(http://chaijs.com/)
所有的测试用例(it块)都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现。

Chai的基本使用


expect(4 + 5).to.be.equal(9);  //判断4+5等于9  true
expect(4 + 5).to.be.not.equal(10); //判断4+5不等于10 true
expect({ bar: 'baz' }).to.be.deep.equal({ bar: 'baz' });  //深度判断是否相等

expect(true).to.be.ok; //判断是true
expect(false).to.not.be.ok; //判断是false

// 判断类型
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');

//判断是否包含
expect([1,2,3]).to.include(2);

Vue中使用测试步骤(一)

1.在Node环境下安装Vue-CLI


npm install -g vue-cli

2.通过Vue-CLI初始化项目文件,命令如下


vue init webpack testTodo
  1. 可以运行初始化的测试

    npm run unit

    Vue脚手架已经初始化了一个HelloWorld.spec.js的测试文件去测试HelloWrold.vue, 你可以在test/unit/specs/HelloWorld.spec.js下找到这个测试文件.(提示: 将来所有的测试文件, 都将放specs这个目录下, 并以测试脚本名.spec.js结尾命名!)

Vue中使用测试步骤(二)

4*.安装Vue.js 官方的单元测试实用工具库(方便在node环境下操作Vue)
npm install --save-dev @vue/[email protected]

  1. 做一个TodoMVC 完成查看、增加、删除、修改功能

每完成一个功能就做一个测试

教材/学习资料

视频教学:Vue单元测试
学习文件链接:https://pan.baidu.com/s/1Uwja... 密码:8v9c

原文地址:https://segmentfault.com/a/1190000016710582

原文地址:https://www.cnblogs.com/lalalagq/p/9901149.html

时间: 2024-10-13 10:39:41

Vue.js—单元测试的相关文章

如何对第一个Vue.js组件进行单元测试 (上)

首先,为什么要单元测试组件? 单元测试是持续集成的关键.通过专注于小的.独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿. 单元测试不仅限于脚本.可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法.这些实例包括单一责任.可预测性和松散耦合. 作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择.我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行. 在开始之前 Vue CLI 3发布了.Vue Test

如何对第一个Vue.js组件进行单元测试 (下)

我们的首次测试 让我们来写首个测试.我们首先需要使用shallowMount手动挂载我们的组件,并将其存储在我们将执行断言的变量中.我们还可以通过propsData属性传递道具作为对象. 已安装的组件是一个对象,它有一些实用方法: 然后,我们可以写第一个断言: 让我们来分析一下这里发生了什么.首先,我们使用Jest的expect函数,它将我们想要测试的值作为参数.在我们的例子中,在父级上用findAll方法来获取具有活动类的所有元素.这将返回一个WrapperArray,包含Wrappers数组

教你如何编写Vue.js的单元测试的方法

Vue.js是一个JavaScript框架,可用于构建Web应用程序的前端框架.特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期.然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦.因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行.在本文中,我们将为VueJS创建一些简单的单元测试. 要进行测试,我们将先制作一个基本的待办事项列表组件.我们将测试该列表是否正确显示,并且用户可以将新项目添加到待办事项列表中.希望在本

vue.js 初体验

Vue.js是什么? 一个构建数据驱动的web界面的库.他不是一个全能框架,技术上重点集中在MVVM中的ViewModel层. Vue.js特点? 轻巧.高性能.可组件化 官网地址:http://cn.vuejs.org/ Vue.js初体验 引入Vue.js独立版本, 至官网下载独立版本.根据提示,开发时选择开发版本. 直接引入Vue.js到静态页面中,从数据绑定开始编写DOM部分和js部分 <div id="app"> {{message}} </div>

Vue.js 2.0 由浅入深,第三天 day03

## 一. 组件component ### 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) ### 2. 定义组件的方式 方式1:先创建组件构造器,然后由组件构造器创建组件 方式2:直接创建组件 ### 3. 组件的分类 分类:全局组件.局部组件 ### 4. 引用模板 将组件内容放到模板<template>中并引用 ### 5. 动态组件 <component :is="

Flask Vue.js全栈开发

Flask Vue.js全栈开发 1. Flask Vue.js全栈开发教程系列 Flask Vue.js全栈开发|第1章:创建第一个Flask RESTful API Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API Flask Vue.js全栈开发|第3章:Flask设计User用户相关API Flask Vue.js全栈开发|第4章:Vue.js调用API实现用户注册/登录/退出 Flask Vue.js全栈开发|第5章:个人主页与

Vue.js项目脚手架构建

vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备(node.js环境): 脚手架环境:vue-cli 执行如下命令安装: npm install vue-cli -g 或者cnpm install vue-cli -g 安装成功后在在命令行里输入vue,出现如图表示OK 二.项目初始化 vue init webpack project-name 例

Vue.js 2.0 轻松入门(一)

Vue - 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 渐进式框架 Vue 分层设计,每层都可灵活的接入其他方案. Declarative Rendering -- 声明式渲染 Component System -

vue.js三种安装方式

Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合. 下面介绍三种 Vue.js 的安装方法: 独立版本 我们可以在Vue.js的官网上直接下载vue.js,并在html中通过<script>标签中引用.<script src = ../vue.js> </script> 开发环境不要使用最