Vue Test Utils API 說明

🧩 掛載元件與選項

• mount:將待測元件「完整掛載」到 DOM，觸發所有生命週期；回傳 Wrapper 物件，供後續斷言與操作

  • attachTo:mount 的選項之一。指定實際 DOM 節點（如 document.body）當掛載目標，適合需要瀏覽器量測或 CSS 計算的場景
  • attrs:mount / shallowMount 選項。直接設定根元素的原生屬性（attributes），例：attrs: { id: 'app' }
  • data:mount / shallowMount 選項。傳入初始 資料（data）物件，等同於在元件內 data() 回傳值
  • props:mount / shallowMount 選項。一次性注入元件 prop 值；若需動態變更，請使用 wrapper.setProps
  • slots:定義具名或預設 slot 內容；可傳字串、函式或 VNode
  • global:集中設定全域配置（plugins、provide / inject、mocks…），讓多支測試共用
  • shallow:mount 選項；若設為 true，等同於使用 shallowMount——僅渲染當前元件，子元件自動 stub 化

---

🔧 Wrapper 方法

• attributes(name?):取得單一或全部 HTML 屬性；無參數時回傳整個屬性 物件
• classes(name?):同理，用於檢查 class；若傳入字串則回傳布林值
• emitted(name?):列出已觸發的自定義事件及其參數；可用來驗證 emit 行為
• exists():確認 Wrapper 是否存在於 DOM，常搭配 find() 使用
• find(selector):傳回首個符合選擇器的 Wrapper；支援 CSS 選擇器、元件、測試 ID 等
• findAll(selector):回傳 WrapperArray，包含所有符合者
• findComponent(definition):以元件定義尋找（適用單檔元件、異步元件…）
• findAllComponents(definition):回傳多個元件 Wrapper
• get(selector) / getComponent(definition):同 find / findComponent，但若找不到會直接丟錯，適合保證一定存在的情況
• html():取出掛載後的 HTML 字串，便利快照比對
• isVisible():判斷元素在頁面上是否可見（含 CSS 與行內 style）
• props(name?):讀取單一或全部 prop；對比上方「選項 props」，此為 Wrapper 方法
• setData(newData):以批次方式變更元件內部 資料，並等待 Vue 更新
• setProps(newProps):更新 prop，適合測試響應式行為
• setValue(value):常用於表單元素，會自動觸發 input / change 事件
• text():取得元素的純文字內容
• trigger(event, options?):手動派發 DOM 事件；可附加鍵碼、滑鼠座標等細節
• unmount():手動卸載 Wrapper，清理偽造的 DOM

---

📦 Wrapper 屬性

• vm:指向被測元件的 Vue 3 執行個體，可直接存取 this 內（exposed）成員

---

🧪 其他工具與設定

• shallowMount:僅渲染當前元件，將子元件以 stub 替代，縮短渲染時間並聚焦單元測試
• enableAutoUnmount:在 beforeEach 自動掛載、afterEach 自動卸載；呼叫一次即可於整個 test suite 生效
• flushPromises:等待隊列中所有微任務 Promise 執行完畢，常用於 nextTick 及非同步 API 測試
• config:Vue Test Utils 的全域靜態設定
  • config.global:與 mount 選項 global 相同功能，但影響全部測試；可在測試啟動前一次性設定
• components:於 config.global 中自訂全域元件或 stub；例：config.global.components = { RouterLink: RouterLinkStub }
  • RouterLinkStub:官方提供的 Vue Router <router-link> 替代元件，可防止實際重新導向頁面並保留 to 資訊供斷言使用