Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)

在《前端进阶之路: 前端架构设计(3) - 测试核心》这边文章中, 通过分析了"传统手工测试的局限性" 去引出了测试驱动开发的理念, 并介绍了一些测试工具. 这篇文章我将通过一个Vue的项目, 去讲解如何使用mocha & karma, 且结合vue官方推荐的vue-test-utils去进行单元测试的实战.

一. 安装

我为本教程写一个示例库, 您可以直接跳过所有安装过程, 安装依赖后运行该示例项目:

如果想一步步进行安装, 也可以跟着下面的步骤进行操作:

(一) 使用脚手架初始化vue项目(使用webpack模板)

//命令行中输入(默认阅读该文章的读者已经安装vue-cli和node环境)
vue init webpack vueunittest

注意, 当询问到这一步Pick a test runner(Use arrow keys)时, 请选择使用Karma and Mocha

Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)_第1张图片

接下来的操作进入项目npm install安装相关依赖后(该步骤可能更会出现PhantomJS这个浏览器安装失败的报错, 不用理会, 因为 之后我们不使用这个浏览器), npm run build即可.

(二) 安装Karma-chrome-launch

接下来安装karma-chrome-launcher, 在命令行中输入

npm install karma-chrome-launcher --save-dev

然后在项目中找到test/unit/karma.conf.js文件, 将PhantomJS浏览器修改为Chrome不要问我为什么不使用PhantomJS, 因为经常莫名的错误, 改成Chrome就不会!!!)

//karma.conf.js

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    //browsers: ['PhantomJS'],
    browsers: ['Chrome'],    
    
    ...
  })
}

(三) 安装Vue-test-utils

安装Vue.js 官方的单元测试实用工具库, 在命令行输入:

npm install --save-dev vue-test-utils

(四) 执行npm run unit

当你完成以上两步的时候, 你就可以在命令行执行npm run unit尝鲜你的第一次单元测试了, Vue脚手架已经初始化了一个HelloWorld.spec.js的测试文件去测试HelloWrold.vue, 你可以在test/unit/specs/HelloWorld.spec.js下找到这个测试文件.(提示: 将来所有的测试文件, 都将放specs这个目录下, 并以测试脚本名.spec.js结尾命名!)

在命令行输入npm run unit, 当你看到下图所示的一篇绿的时候, 说明你的单元测试通过了!

Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)_第2张图片

二. 测试工具的使用方法

下面是一个Counter.vue文件, 我将以该文件为基础讲解项目中测试工具的使用方法.

//Counter.vue



(一) Mocha框架

1. Mocha测试脚本的写法

Mocha的作用是运行测试脚本, 要对上面Counter.vue进行测试, 我们就要写测试脚本, 通常测试脚本应该与Vue组件名相同, 后缀为spec.js. 比如, Counter.vue组件的测试脚本名字就应该为Counter.spec.js

//Counter.spec.js

import Vue from 'vue'
import Counter from '@/components/Counter'

describe('Counter.vue', () => {

  it('点击按钮后, count的值应该为1', () => {
    //获取组件实例
    const Constructor = Vue.extend(Counter);
    //挂载组件
    const vm = new Constructor().$mount();
    //获取button
    const button = vm.$el.querySelector('button');
    //新建点击事件
    const clickEvent = new window.Event('click');
    //触发点击事件
    button.dispatchEvent(clickEvent);
    //监听点击事件
    vm._watcher.run();
    // 断言:count的值应该是数字1
    expect(Number(vm.$el.querySelector('.num').textContent)).to.equal(1);
  })

})

上面这段代码就是一个测试脚本.测试脚本应该包含一个或多个describe, 每个describe块应该包括一个或多个it

describe块称为"测试套件"(test suite), 表示一组相关的测试. 它是一个函数, 第一个参数是测试套件的名称(通常写测试组件的名称, 这里即为Counter.js), 第二个参数是一个实际执行的函数.

it块称为"测试用例"(test case), 表示一个单独的测试, 是测试的最小单位. 它也是一个函数, 第一个参数是测试用例的名称(通常描述你的断言结果, 这里即为"点击按钮后, count的值应该为1"), 第二个参数是一个实际执行的函数.

2. Mocha进行异步测试

我们在Counter.vue组件中添加一个按钮, 并添加一个异步自增的方法为incrementByAsync, 该函数设置一个延时器, 1000ms后count自增1.