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
- 可以运行初始化的测试
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
- 做一个TodoMVC 完成查看、增加、删除、修改功能
每完成一个功能就做一个测试
教材/学习资料
视频教学:Vue单元测试
学习文件链接:https://pan.baidu.com/s/1Uwja... 密码:8v9c