Vue.js 2.0 單元測試

配置和工具

任何兼容基于模塊的構(gòu)建系統(tǒng)都可以正常使用，但如果你需要一個具體的建議，可以使用 Karma 進行自動化測試。它有很多社區(qū)版的插件，包括對 Webpack 和 Browserify 的支持。更多詳細的安裝步驟，請參考各項目的安裝文檔，通過這些 Karma 配置的例子可以快速幫助你上手（Webpack 配置，Browserify 配置）。

簡單的斷言

在測試的代碼結(jié)構(gòu)方面，你不必為了可測試在你的組件中做任何特殊的操作。只要導(dǎo)出原始設(shè)置就可以了：

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

當(dāng)測試的組件時，所要做的就是導(dǎo)入對象和 Vue 然后使用許多常見的斷言：

// 導(dǎo)入 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')
  })
  // 評估原始組件選項中的函數(shù)的結(jié)果
  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!')
  })
  // 創(chuàng)建一個實例并檢查渲染輸出
  it('renders the correct message', () => {
    const Ctor = Vue.extend(MyComponent)
    const vm = new Ctor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

編寫可被測試的組件

很多組件的渲染輸出由它的 props 決定。事實上，如果一個組件的渲染輸出完全取決于它的 props，那么它會讓測試變得簡單，就好像斷言不同參數(shù)的純函數(shù)的返回值。看下面這個例子：

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

你可以在不同的 props 中，通過 propsData 選項斷言它的渲染輸出：

import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// 掛載元素并返回已渲染的文本的工具函數(shù) 
function getRenderedText (Component, propsData) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData }).$mount()
  return vm.$el.textContent
}
describe('MyComponent', () => {
  it('render correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')
    expect(getRenderedText(MyComponent, {
      msg: 'Bye'
    })).toBe('Bye')
  })
})

斷言異步更新

由于 Vue 進行異步更新DOM的情況，一些依賴DOM更新結(jié)果的斷言必須在 Vue.nextTick回調(diào)中進行：

// 在狀態(tài)更新后檢查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'
  // 在狀態(tài)改變后和斷言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})

我們計劃做一個通用的測試工具集，讓不同策略的渲染輸出（例如忽略子組件的基本渲染）和斷言變得更簡單。