vue 单元测试

vue 单元测试

• 在 Vue 中的测试：采用的是 Vue 官方工具（Vue-CLI）搭建出来的项目，在这个搭建工具中推荐的两种测试分别是端到端的测试(E2E)和单元测试(Unit Test)。

端到端测试

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

单元测试

测试驱动开发（TDD：Test-Driven Development），也称为

单元测试

。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。

• 在 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 。 ​ let expect = require('chai').expect; expect(1 + 1).to.be.equal(2);
• Chai 是一种断言库。Chai 官方文档
• 所有的测试用例（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' }); // 深度判断是否相等，返回 true ​ 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 中使用测试步骤（一）

• 在 Node 环境下安装 Vue-CLI npm install -g vue-cli
• 通过 Vue-CLI 初始化项目文件 vue init webpack testtodo
• 可以运行初始化的测试 npm run unit

Vue 脚手架已经初始化了一个 HelloWorld.spec.js 的测试文件去测试 HelloWorld.vue ，可以在 test/unit/specs/HelloWorld.spec.js 下找到这个测试文件。（提示：将来所有的测试文件，都将放到 specs 这个目录下，并以

测试脚本名.spec.js

结尾命名）。

第一个测试文件介绍

• 通过代码走进单元测试 // HelloWorld.spec.js import Vue from 'vue' import HelloWorld from '@/components/HelloWorld' ​ // 创建测试套件：一般情况下，一个测试组件写一个测试套件。 describe('HelloWorld.vue', () => { // 测试用例：用来测试不同的方法或者显示的内容，一个测试组件可以写多个测试用例。 it('should render correct cotents', () => { // 通过 Vue 来渲染 helloworld 。 const Constructor = Vue.extend(HelloWorld) const vm = new Constructor().$mount() // 判断页面中是否有 msg 所渲染出来的内容。等价于 document.querySelector(.hello h1) expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Welcome to Your Vue.js App') }) })
• 简洁的一种写法 // HelloWorld.spec.js import Vue from 'vue' import HelloWorld from '@/components/HelloWorld' import { mount } from '@vue/test-utils' ​ describe('HelloWorld.vue', () => { it('', () => { let wrapper = mount(HelloWorld, { propsDate: { msg: 'hello' } }) // 设置属性的另外一种写法：wrapper.setProps({ msg: 'hello' }) expect(wrapper.find('h1').text()).to.be.contain('hello') }) })

Vue 中使用测试步骤（二）

• 安装 Vue.js 官方的单元测试实用工具库（方便在 node 环境下操作 Vue） npm install --save-dev @vue/[email protected]
• 做一个 TodoMVC 完成查看、增加、删除、修改功能# 每完成一个功能就做一个测试