入門指南
歡迎來到 Vue Test Utils，這是 Vue.js 官方的測試工具函式庫！
這份文件是針對 Vue Test Utils v2，主要支援 Vue 3。
簡單來說：
- Vue Test Utils 1 支援 Vue 2。
- Vue Test Utils 2 支援 Vue 3。
什麼是 Vue Test Utils？
Vue Test Utils（簡稱 VTU）是一組用來簡化 Vue.js 元件測試的工具函式。它提供一些方法，讓你可以在隔離的環境下掛載並操作 Vue 元件。
來看個範例：
import { mount } from '@vue/test-utils'
// 要測試的元件
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
}
test('displays message', () => {
const wrapper = mount(MessageComponent, {
props: {
msg: 'Hello world'
}
})
// 斷言元件渲染的文字內容
expect(wrapper.text()).toContain('Hello world')
})
Vue Test Utils 通常會搭配測試執行器一起使用。常見的測試執行器有：
- Vitest：終端機型，實驗性支援瀏覽器 UI。
- Cypress：瀏覽器型，支援 Vite、webpack。
- Playwright（實驗性）：瀏覽器型，支援 Vite。
- WebdriverIO：瀏覽器型，支援 Vite、Webpack，跨瀏覽器支援。
Vue Test Utils 是一個精簡且不帶主觀意見的函式庫。如果你想要功能更豐富、操作更方便且有明確設計方向的工具，可以考慮 Cypress Component Testing（有熱重載開發環境），或 Testing Library（強調以無障礙選擇器進行斷言）。這兩個工具底層都用到 Vue Test Utils，並且暴露相同的 API。
接下來呢？
想看 Vue Test Utils 的實際應用，可以參考 Crash Course，我們會用測試優先的方式打造一個簡單的 Todo 應用。
文件分為兩大部分：
- Essentials：涵蓋你在測試 Vue 元件時最常遇到的情境。
- Vue Test Utils in Depth：深入探討這個函式庫的進階功能。
你也可以直接查閱完整 API。
如果你偏好看影片學習，這裡也有一系列教學影片可以參考。