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

})

})