Vue.js 單元測試
阿新 • • 發佈：2018-11-25
單元測試
配置和工具
任何相容基於模組的構建系統都可以正常使用，但如果你需要一個具體的建議，可以使用 Karma 進行自動化測試。它有很多社群版的外掛，包括對 Webpack 和 Browserify 的支援。更多詳細的安裝步驟，請參考各專案的安裝文件，通過這些 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(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 Constructor = 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>
|
你可以在不同的 props 中，通過 propsData
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// 掛載元素並返回已渲染的文字的工具函式
function getRenderedText (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 的情況，一些依賴 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()
})
})
|
我們計劃做一個通用的測試工具集，讓不同策略的渲染輸出 (例如忽略子元件的基本渲染) 和斷言變得更簡單。
關於更深入的 Vue 單元測試的內容，請移步 Vue Test Utils 以及我們關於 Vue 元件的單元測試的 cookbook 文章。