26 | 工具 - 单元测试

主要内容：

1. 简单的断言
2. 写可测试的组件
3. 断言的异步更新

Vue CLI已经为单元测试构建了操作项，使用Jest或Mocha开箱即用。我们也提供了官方的单元测试库Vue Test Utils,为自定义配置提供了更为细节的指导。

简单的断言

你不必为了组件的可测试性提供任何特殊操作，导出原生的操作即可：

<template>
	<span>{{ message }}<span>
</template>

<script>
	export default {
		data () {
				return {
						message: 'hello!'
				}
		  },
		  created () {
				  this.message = 'bye!'
		  }
	}
<script>

然后随着Vue的导入组件的选项，你可以写一些常用的断言（这里我们使用Jasmine/Jest风格的expect作为例子）：

// 导入Vue和被测试的组件
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// 这是一些Jasmine 2.0 测试，不过你可以使用能使用任何测试运行器/断言库
describe('MyComponent', () => {
	// 检查原生组件项
	it('has a created hook', () => {
		expect(typeof MyComponent.created).toBe('function')
	})
	
	// 在原生组件项中计算函数的结果
	it('sets the correct default data', () => {
		expect(typeof MyComponent.data).toBe('function')
		const defaultData = MyComponent.data()
		expect(defaultData.message).toBe('hello!')
	})

	// 在mount中检查组件实例
	it('correctly  sets the message when created', () => {
		const vm = new Vue(MyComponent).$mount()
		expect(vm.message).toBe('bye!')
	})
	
	// 挂载一个实例并检查渲染输出
	it('renders the correct message', () => {
		const Constuctor = Vue.extend(MyComponent)
		const vm = new Constructor().$mount()
		expect(vm.$el.textContent).toBe('bye!')
	})
}

编写可被测试的组件

一个组件的渲染输出主要由它所接收的props决定，如果一个组件的渲染输出只依赖于它的props，那么测试将变得简单，就好像断言纯函数的不同参数的返回值。

<template>
	<p>{{ msg }}</p>
</template>
<script>
	export default {
		props: ['msg']	
	}
</script>

你能使用propsData操作项用不同的props去断言渲染的输出：

import Vue from 'vue'
import MyComponent from './MyComponent.vue'

// 帮助函数：加载和返回渲染文本
function getRederedText (Component, propsData) {
	const Constructor = Vue.extend(Component)
	const vm = new Constructor({ propsData: propsData }).$mount()
	return vm.$el.textContent
}

describe('MyComponent', () => {
	it('renders correctly with different props', () => {
		expect(getRenderedText(MyComponent, {
			msg: 'Hello'
		})).toBe('Hello')

		expect(getRenderedText(MyComponent, {
			msg: 'Bye'
		})).toBe('Bye')
	})
})

断言异步更新

由于Vue执行异步更新DOM performs DOM updates asynchronously，一些状态改变导致的DOM更新的断言必须在Vue.nextTick回调中进行：

// 状态更新之后，检查生成的HTML
it('updates the rendered message when vm.message updates', done => {
	const vm = new Vue(MyComponent).$mount()
	vm.message = 'foo'
	
	// 在断言DOM更新之前，状态改变之后等待一个“tick”
	Vue.nextTick(() => {
		expect(vm.$el.textContent).toBe('foo')
		done()
	})
})

对于更深入的Vue单元测试内容，移步Vue Text Utils和我们关于unit testing vue components cookbook的文章。