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 完成查看、增加、删除、修改功能

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