vue 单元测试
单元测试
配置和工具
任何兼容基于模块的构建系统都可以正常使用，但如果你需要一个具体的建议，可以使用Karma进行自动化测试。它有很多社区版的插件，包括对webpack和browserify的支持。
简单的断言
在测试的代码结构方面，你不必为了可测试在你的组件中做任何特殊的操作。只要导出原始设置就可以
<template>
<span>{{message}}</span>
</template>
<script>
export default {
data(){
return {
message:'hello!'
}
}，
created(){
this.message ='bye!'
}
}
</script>
当测试的组件时，所要做的就是导入对象和Vue，然后使用许多常见的断言：
//导入vue..js和组件进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。
describe('MyComponent',() => {
//检查原始组件选项
it('has a created hook', () => {
expect(type of MyComponent.created).toBe('function')
})
//评估原始组件选项中的函数的结果
it('sets the correct default data',() => {
expect(type of 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 Ctor = Vue.extend(MyComponent)
const vm = new Ctor().$mount()
expect (vm.$el.textContent).toBe('bye!')
})
})
编写可被测试的组件
很多组件的渲染输出由它的props决定，事实上，如果一个组件的渲染输出完全取决于它的props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面的这个例子：
<template>
<p>{{message}}</p>
</template>
<script>
export default{
props:['msg']
}
</script>
你可以在不同的props中，通过propsData选项断言它的渲染输出：
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
//挂载元素并返回已渲染的文本的工具函数
function getRenderedText(Component,propsData){
const Ctor = new Vue.extent(Component)
const vm = new Ctor({propsData:propsData}).$mount()
return vm.$el.textContent
}
describe('MyComponent',() => {
it('renders correctly with different props',() => {
expect(getReneredText(MyComponent,{msg:'hello'})).toBe('hello')
expect(getReneredText(MyComponent,{msg:'bye'})).toBe('bye')
})
})
断言异步更新
由于vue进行异步更新Dom的情况，一些依赖DOM更新结果的断言必须在vue.nextTick回调中进行：
//在状态更新后检查生产的HTML
it('updates the rendered message when vm.message updates',done => {
const vm = new Vue(MyComponent).$mount()
vm.message = 'foo'
//在状态改变后和断言DOM更新前等待一刻
Vue.nextTick(() => {
expect(vm.$el.textContent).toBe('foo')
done()
})
})
