Vue单元测试探索

Karma是由Google团队开发的一个测试工具, 它不是一个测试框架, 只是一个跑测试的驱动. 你可以通过karma的配置文件集成你喜欢的框架, 断言库和浏览器.

Vue Test Utils

Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们可以更轻松地为Vue应用编写单元测试。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是测试运行器无关的。

Chai断言库

Chai是一个断言库，用于Node和浏览器，它可以与任何JavaScript测试框架相结合

搭建方法：

本文选择的测试框架由Karma + Mocha + Chai + Vue Test Utils搭配，自己手动配置过程比较繁琐，在这里强烈推荐大家使用vue-cli，vue-cli有现成的模板可以生成项目，执行vue init webpack [项目名]，'Pick a test runner'时选择'Karma + Mocha' 。vue-cli会自动生成Karma + Mocha + Chai的配置，我们只需要额外安装Vue Test Utils，执行npm install @vue/test-utils。

specs里存放的是测试脚本，这部分是由开发人员编写的。
coverage文件夹里存放的是测试报告，打开里面的index.html可以直观地看到测试的代码覆盖率。
Karma.conf.js是karma的配置文件。

怎样写单元测试

举个例子

被测试的组件HelloWorld.vue（path：E:\study\demo\src\components）

代码如下：

expect(content).to.equal('Welcome to Your Vue.js App');

所谓"断言"，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。上面这句断言的意思是，变量content应等于'Welcome to Your Vue.js App'。

所有的测试用例（it块）都应该含有一句或多句的断言。它是编写测试用例的关键。

3.查看测试结果

最后运行一下npm run unit，来看结果：

这就是一个简单的单元测试编写过程，是不是很简单呢？大家都动手自己试试吧。

友情提示

1.用createLocalVue安装插件

我们在给实际项目写单元测试的时候，项目代码会比上面的demo组件复杂很多。如果你要测试的单个组件里使用了vue-router或者Vuex的话，就要使用createLocalVue。 比如，有这样一段代码：

// 这不会被捕获
it('will time out', (done) => {
  Vue.nextTick(() => {
    expect(true).toBe(false)
    done()
  })
})

// 接下来的两项测试都会如预期工作
it('will catch the error using done', (done) => {
  Vue.config.errorHandler = done
  Vue.nextTick(() => {
    expect(true).toBe(false)
    done()
  })
})

it('will catch the error using a promise', () => {
  return Vue.nextTick()
    .then(function () {
      expect(true).toBe(false)
    })
})

在下面的项目实战中，有使用到nextTick的例子，大家可以当做参考。

3. 修改默认测试浏览器

测试在配置文件karma.conf里，browsers默认是'PhantomJS'.

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

但我在使用过程中发现PhantomJS环境的warning和error提示和平时在浏览器chrome看到的提示不太一样，有点难懂，如图：

Chrome：

browsers设置为'Chrome'，得到的报错提示和真实Chrome浏览器上一致，并且可以使用console.log()，调试起来和真实开发的体验一样。唯一缺点是每次执行npm run unit都会弹出一个Chrome浏览器，PhantomJS则不会，推荐大家调试测试脚本时候使用Chrome，等脚本都跑通了不需要调试的时候可以换回PhantomJS。

4. 加上--auto-watch

默认下auto-watch是关闭的，每次修改了测试脚本，或者修改了项目代码之后都需要手动执行一次命令才能启动测试，非常麻烦。我们可以加上--auto-watch，这样在开发的过程中，如果某个功能没有通过测试用例，开发人员可以立刻发现并修复。

// form-setting.vue测试校验功能
describe('form-setting.vue测试校验功能', () => {
	const wrapper = shallowMount(formSetting, {
		localVue
	});

	let vm = wrapper.vm;

	it('test form填入数字是否会不通过', () => {
		vm.appType = 'ios'; // 选择系统ios
		vm.ios.schemeInfo = 1; // 输入数字
		expect(vm.isValid()).to.equal(false);
	});

	it('test form填入字符串格式是否会不通过', () => {
		vm.appType = 'ios';
		vm.ios.schemeInfo = '1'; // 输入字符串
		expect(vm.isValid()).to.equal(false);
	});

	it('test form填入错误json格式是否会不通过', () => {
		vm.appType = 'ios';
		vm.ios.schemeInfo = '{a:{a:}}'; // 输入非法的类似json格式的字符串
		expect(vm.isValid()).to.equal(false);
	});

	it('test form填入空对象是否会不通过', () => {
		vm.appType = 'ios';
		vm.ios.schemeInfo = 'null'; // 输入null对象字符串
		expect(vm.isValid()).to.equal(false);
	});

	it('test form填入正确JSON格式是否会通过', () => {
		vm.appType = 'ios';
		vm.ios.schemeInfo = '{"a": 111}'; // 输入正确的json字符串
		expect(vm.isValid()).to.equal(true);
	});
});

return Vue.nextTick().then(() => {
    ...断言
}

import { mount, createLocalVue } from '@vue/test-utils'
import ValidateDemo from '@/components/validate-demo'
import validate from '@/directive/validate/1.0/validate'
import Vue from 'Vue'
const localVue = createLocalVue() // 创建一个Vue实例
localVue.use(validate) // 挂载校验插件
describe('测试validate-demo.vue', () => {
  it('没发生输入操作，[不显示error]', () => {
    const wrapper = mount(ValidateDemo, {
      localVue
    })
    return Vue.nextTick().then(() => {
      expect(wrapper.find('.error').exists()).to.equal(false)
    })
  })
  it('聚焦输入框然后失去焦点，[显示error]', () => {
    const wrapper = mount(ValidateDemo, {
      localVue
    })
    let input = wrapper.find('input')
    input.trigger('focus') // 聚焦
    input.trigger('blur') // 失去焦点

    return Vue.nextTick().then(() => {
      expect(wrapper.find('.error').exists()).to.equal(true)
    })
  })

  it('发生输入操作，然后清空，[显示error]', () => {
    const wrapper = mount(ValidateDemo, {
      localVue
    })
    let vm = wrapper.vm
    let input = wrapper.find('input')
    input.trigger('focus')
    vm.name = '不为空'
    vm.name = '' // 清空
    input.trigger('blur')
    return Vue.nextTick().then(() => {
      expect(wrapper.find('.error').exists()).to.equal(true)
    })
  })

  it('输入内容后，[不显示error]', () => {
    const wrapper = mount(ValidateDemo, {
      localVue
    })
    let vm = wrapper.vm
    vm.name = '不为空' // 输入内容
    return Vue.nextTick().then(() => {
      expect(wrapper.find('.error').exists()).to.equal(false)
    })
  })
})