1、基本的示例

單元測試是軟件開發(fā)非常基礎的一部分。單元測試會封閉執(zhí)行最小化單元的代碼，使得添加新功能和追蹤問題更容易。Vue 的單文件組件使得為組件撰寫隔離的單元測試這件事更加直接。它會讓你更有信心地開發(fā)新特性而不破壞現(xiàn)有的實現(xiàn)，并幫助其他開發(fā)者理解你的組件的作用。
這是一個判斷一些文本是否被渲染的簡單的示例：

<template><div><input v-model="username"><divv-if="error"class="error">{{ error }}</div></div>
</template>
<script>
export default {name: 'Hello',data () {return {username: ''}},computed: {error () {return this.username.trim().length < 7? 'Please enter a longer username': ''}}
}
</script>

import { shallowMount } from '@vue/test-utils'
import Hello from './Hello.vue'
test('Hello', () => {// 渲染這個組件const wrapper = shallowMount(Hello)// `username` 在除去頭尾空格之后不應該少于 7 個字符wrapper.setData({ username: ' '.repeat(7) })// 確認錯誤信息被渲染了expect(wrapper.find('.error').exists()).toBe(true)// 將名字更新至足夠長wrapper.setData({ username: 'Lachlan' })// 斷言錯誤信息不再顯示了expect(wrapper.find('.error').exists()).toBe(false)
})

上述代碼片段展示了如何基于 username 的長度測試一個錯誤信息是否被渲染。它展示了 Vue 組件單元測試的一般思路：渲染這個組件，然后斷言這些標簽是否匹配組件的狀態(tài)。

2、為什么要測試？

組件的單元測試有很多好處：

• 提供描述組件行為的文檔
• 節(jié)省手動測試的時間
• 減少研發(fā)新特性時產(chǎn)生的 bug
• 改進設計
• 促進重構(gòu)自動化測試使得大團隊中的開發(fā)者可以維護復雜的基礎代碼

3、實際的例子

單元測試應該：

• 可以快速運行
• 易于理解
• 只測試一個獨立單元的工作我們在上一個示例的基礎上繼續(xù)構(gòu)建，同時引入一個工廠函數(shù) (factory function)使得我們的測試更簡潔更易讀。這個組件應該：
• 展示一個“Welcome to the Vue.js cookbook”的問候語
• 提示用戶輸入用戶名
• 如果輸入的用戶名少于七個字符則展示錯誤信息讓我們先看一下組件代碼：

<template><div><div class="message">{{ message }}</div>Enter your username: <input v-model="username"><divv-if="error"class="error">Please enter a username with at least seven letters.</div></div>
</template>
<script>
export default {name: 'Foo',data () {return {message: 'Welcome to the Vue.js cookbook',username: ''}},computed: {error () {return this.username.trim().length < 7}}
}
</script>

我們應該測試的內(nèi)容有：

• message 是否被渲染
• 如果 error 是 true，則
  應該展示
• 如果 error 是 false，則
  不應該展示我們的第一次測試嘗試：

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {it('renders a message and responds correctly to user input', () => {const wrapper = shallowMount(Foo, {data: {message: 'Hello World',username: ''}})// 確認是否渲染了 `message`expect(wrapper.find('.message').text()).toEqual('Hello World')// 斷言渲染了錯誤信息expect(wrapper.find('.error').exists()).toBeTruthy()// 更新 `username` 并斷言錯誤信息不再被渲染wrapper.setData({ username: 'Lachlan' })expect(wrapper.find('.error').exists()).toBeFalsy()})
})

上述代碼有一些問題：

• 單個測試斷言了不同的事情
• 很難闡述組件可以處于哪些不同的狀態(tài)，以及它該被渲染成什么樣子接下來的示例從這幾個方面改善了測試：
• 每個 it 塊只做一個斷言
• 讓測試描述更簡短清晰
• 只提供測試需要的最小化數(shù)據(jù)
• 把重復的邏輯重構(gòu)到了一個工廠函數(shù)中 (創(chuàng)建 wrapper 和設置 username 變量)更新后的測試：

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo'
const factory = (values = {}) => {return shallowMount(Foo, {data () {return {...values}}})
}
describe('Foo', () => {it('renders a welcome message', () => {const wrapper = factory()expect(wrapper.find('.message').text()).toEqual("Welcome to the Vue.js cookbook")})it('renders an error when username is less than 7 characters', () => {const wrapper = factory({ username: ''  })expect(wrapper.find('.error').exists()).toBeTruthy()})it('renders an error when username is whitespace', () => {const wrapper = factory({ username: ' '.repeat(7)  })expect(wrapper.find('.error').exists()).toBeTruthy()})it('does not render an error when username is 7 characters or more', () => {const wrapper = factory({ username: 'Lachlan'  })expect(wrapper.find('.error').exists()).toBeFalsy()})
})

注意事項：
在一開始，工廠函數(shù)將 values 對象合并到了 data 并返回了一個新的 wrapper 實例。這樣，我們就不需要在每個測試中重復 const wrapper = shallowMount(Foo)。另一個好處是當你想為更復雜的組件在每個測試中偽造或存根一個方法或計算屬性時，你只需要聲明一次即可。

4、額外的上下文

上述的測試是非常簡單的，但是在實際情況下 Vue 組件常常具有其它你想要測試的行為，諸如：

• 調(diào)用 API
• 為 Vuex 的 store，commit 或 dispatch 一些 mutation 或 action
• 測試用戶交互我們在 Vue Test Utils 的教程中提供了更完整的示例展示這些測試。
  Vue Test Utils 及龐大的 JavaScript 生態(tài)系統(tǒng)提供了大量的工具促進 100% 的測試覆蓋率。單元測試只是整個測試金字塔中的一部分。其它類型的測試還包括 e2e (端到端) 測試、快照比對測試等。單元測試是最小巧也是最簡單的測試——它們通過隔離單個組件的每一個部分，來在最小工作單元上進行斷言。

快照比對測試會保存你的 Vue 組件的標記，然后比較每次新生成的測試運行結(jié)果。如果有些東西改變了，開發(fā)者就會得到通知，并決定這個改變是刻意為之 (組件更新時) 還是意外發(fā)生的 (組件行為不正確)。

端到端測試致力于確保組件的一系列交互是正確的。它們是更高級別的測試，例如可能會測試用戶是否注冊、登錄以及更新他們的用戶名。這種測試運行起來會比單元測試和快照比對測試慢一些。

單元測試中開發(fā)的時候是最有用的，即能幫助開發(fā)者思考如何設計一個組件或重構(gòu)一個現(xiàn)有組件。通常每次代碼發(fā)生變化的時候它們都會被運行。