為專案建立防護網 (測試基礎)
寫程式就像蓋房子，蓋好後總要做一下壓力測試和安全檢查，確保它穩固可靠。在軟體開發中，這個過程就叫做「測試」。
自動化測試能幫助我們在未來新增或修改功能時，快速驗證沒有不小心弄壞原本好的地方，是打造高品質專案不可或缺的一環。
1. 兩種主要的測試方式
在 Nuxt 中，我們主要會接觸到兩種測試方式，讓我們用造車來比喻：
單元測試 (Unit Testing)
檢查汽車的單一零件是否正常運作。
「這個輪胎能不能轉？」、「這個方向盤有沒有反應？」
測試一個獨立的元件 (<MyButton />) 或一個函式 (useCounter()) 的功能是否正確。
端到端測試 (End-to-End Testing, E2E)
把整台車組裝好，找一個真人司機實際上路開開看，模擬完整的使用流程。
從「發動引擎」到「踩油門前進」，再到「成功煞車停下」。
模擬使用者打開瀏覽器，點擊「關於我們」連結，然後驗證頁面是否成功跳轉並顯示出「關於我們」的標題。
2. 準備我們的測試工具箱
Nuxt 官方提供了一個名為 @nuxt/test-utils 的工具庫，它大大簡化了在 Nuxt 中撰寫測試的複雜度。
要開始測試，我們需要先安裝一些必要的工具。請打開您的終端機，執行以下指令：
npm install -D @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core您不需要立刻理解每一個工具的用途，只需要知道它們分別扮演著：
@nuxt/test-utils
Nuxt 官方測試工具
vitest
測試的執行與管理工具 (測試執行器)
@vue/test-utils
測試 Vue 元件的核心工具
happy-dom
在沒有真實瀏覽器的環境下，模擬出一個瀏覽器環境
playwright-core
用來控制真實瀏覽器進行 E2E 測試的工具
3. 設定測試環境
最後，我們需要在專案根目錄建立一個 vitest.config.ts 檔案，這是 vitest 的設定檔。
// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'
export default defineVitestConfig({
// 您可以在這裡加入客製化的 Vitest 設定
// 但通常情況下，預設值就已經很夠用了
})簡單設定：這個設定檔非常簡潔，因為 @nuxt/test-utils 已經為我們處理好了大部分的配置。
為什麼需要測試？
測試的好處
提早發現錯誤
確保功能正確性
重構時的安全保障
提高程式碼品質
減少維護成本
測試金字塔
今日總結
今天我們建立了測試的基礎觀念，並安裝好了所有需要的工具。這就像是我們在動工前，先把所有的圖紙和工具都準備齊全。
理解了測試的兩大類型
單元測試（測零件）和端到端測試（測全車）的區別
安裝了完整的測試工具
以 vitest 和 @nuxt/test-utils 為核心的測試工具鏈
建立了測試環境設定
透過 vitest.config.ts 設定檔案，準備好測試環境
下一步預告
明天，我們將開始進行第一種類型的測試：單元測試，學習如何單獨測試一個元件，確保它正常運作。