Vue.js—单元测试

2024年1月24日 162次阅读 来源: SunPort6

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

    原文作者：SunPort6
    原文地址: https://segmentfault.com/a/1190000016710582
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞