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/test-utils@1.0.0-beta.12

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

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

教材/学习资料

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

本文固定链接: http://www.js-code.com/vue-js/vue-js_26173.html