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()

})

})