1、基本的示例

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

<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', () => {// 渲染這個(gè)組件const wrapper = shallowMount(Hello)// `username` 在除去頭尾空格之后不應(yīng)該少于 7 個(gè)字符wrapper.setData({ username: ' '.repeat(7) })// 確認(rèn)錯(cuò)誤信息被渲染了expect(wrapper.find('.error').exists()).toBe(true)// 將名字更新至足夠長(zhǎng)wrapper.setData({ username: 'Lachlan' })// 斷言錯(cuò)誤信息不再顯示了expect(wrapper.find('.error').exists()).toBe(false)
})

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

2、為什么要測(cè)試？

組件的單元測(cè)試有很多好處：

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

3、實(shí)際的例子

單元測(cè)試應(yīng)該：

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

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

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

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

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: ''}})// 確認(rèn)是否渲染了 `message`expect(wrapper.find('.message').text()).toEqual('Hello World')// 斷言渲染了錯(cuò)誤信息expect(wrapper.find('.error').exists()).toBeTruthy()// 更新 `username` 并斷言錯(cuò)誤信息不再被渲染wrapper.setData({ username: 'Lachlan' })expect(wrapper.find('.error').exists()).toBeFalsy()})
})

上述代碼有一些問(wèn)題：

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

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

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

4、額外的上下文

上述的測(cè)試是非常簡(jiǎn)單的，但是在實(shí)際情況下 Vue 組件常常具有其它你想要測(cè)試的行為，諸如：

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

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

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

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