API
Vue 測試庫 重新匯出所有來自 DOM 測試庫 的內容。
它還公開了這些方法
render(Component, options)
render 函數是 Vue 測試庫中渲染元件的唯一方法。
它最多接受 2 個參數，並返回一個帶有一些輔助方法的物件。
function render(Component, options) {
return {
...DOMTestingLibraryQueries,
container,
baseElement,
debug(element),
unmount,
html,
emitted,
rerender(props),
}
}
參數
元件
要測試的有效 Vue 元件。
選項
一個物件，其中包含要傳遞給 @vue/test-utils mount 的額外資訊。
此外，還可以提供以下選項
store (Object | Store)
Vuex 儲存的物件定義。如果提供了 store 物件，Vue 測試庫 將匯入並配置 Vuex 儲存。如果傳遞了已實例化的 Vuex 儲存，則將會使用它。
routes (Array | VueRouter)
一組 Vue Router 的路由。如果提供了 routes，則該函式庫將匯入並配置 Vue Router。如果傳遞了已實例化的 Vue Router，則將會使用它。
props (Object)
它將與 propsData 合併。
container (HTMLElement)
預設情況下，Vue 測試庫 將建立一個 div 並將其附加到 baseElement。這是將渲染元件的地方。如果您透過此選項提供自己的 HTMLElement 容器，則它不會自動附加到 baseElement。
例如：如果您正在單元測試 tablebody 元素，則它不能是 div 的子元素。在這種情況下，您可以將 table 指定為渲染 container。
const table = document.createElement('table')
const {container} = render(TableBody, {
props,
container: document.body.appendChild(table),
})
baseElement (HTMLElement)
如果指定了 container，則此值會預設為該值，否則此值會預設為 document.body。baseElement 用作查詢的基礎元素，以及您使用 debug() 時所列印的內容。
render 結果
render 方法會傳回一個具有一些屬性的物件
...queries
render 最重要的功能是，來自 DOM 測試庫 的查詢會自動傳回，其第一個引數已繫結到 baseElement，預設為 document.body。
請參閱 查詢 以取得完整列表。
const {getByLabelText, queryAllByTestId} = render(Component)
container
已渲染的 Vue 元件的包含 DOM 節點。預設情況下，它是 div。這是一個常規 DOM 節點，因此您可以呼叫 container.querySelector 等來檢查子節點。
提示：若要取得已渲染元素的根元素，請使用
container.firstChild。
🚨 如果您發現自己使用
container來查詢已渲染的元素，則您應該重新考慮！其他查詢的設計是為了更能適應您正在測試的元件所做的變更。避免使用container來查詢元素！
baseElement
Vue 元件在 container 中渲染的包含 DOM 節點。如果您未在 render 的選項中指定 baseElement，則它將預設為 document.body。
當您想要測試的元件在容器 div 之外渲染某些內容時，這很有用，例如，當您想要快照測試將其 HTML 直接在主體中渲染的入口網站元件時。
注意：由
render傳回的查詢會查看baseElement，因此您可以使用查詢來測試入口網站元件，而無需baseElement。
debug(element)
此方法是 console.log(prettyDOM(element)) 的捷徑。
import {render} from '@testing-library/vue'
const HelloWorldComponent = {
template: `<h1>Hello World</h1>`,
}
const {debug} = render(HelloWorldComponent)
debug()
// <div>
// <h1>Hello World</h1>
// </div>
這是 prettyDOM 的一個簡單包裝函式，它也公開並來自 DOM 測試庫。
unmount()
@vue/test-utils destroy 的別名。
html()
@vue/test-utils html 的別名。
emitted()
@vue/test-utils emitted 的別名。
rerender(props)
@vue/test-utils setProps 的別名。
它會傳回 Promise，因此您可以 await rerender(...)。
fireEvent
由於 Vue 在重新渲染期間會非同步地套用 DOM 更新，因此 fireEvent 工具會重新匯出為 async 函數。為了確保 DOM 在測試中響應事件而正確更新，建議始終 await fireEvent。
await fireEvent.click(getByText('Click me'))
此外，Vue 測試庫還公開了兩個有用的方法
touch(elem)
它會觸發 focus() 和 blur() 事件。
await fireEvent.touch(getByLabelText('username'))
// Same as:
await fireEvent.focus(getByLabelText('username'))
await fireEvent.blur(getByLabelText('username'))
update(elem, value)
正確處理由 v-model 控制的輸入。它會在發出適當的本機事件的同時更新輸入/選取/文字區域的內部值。
請參閱 v-model 範例測試中 update 的運作範例。
cleanup
卸載使用 render 掛載的 Vue 樹狀結構。
如果您的測試框架 (例如 mocha、Jest 或 Jasmine) 將全域
afterEach()函數插入測試環境，則會自動呼叫此函式。如果沒有，您需要在每個測試之後呼叫cleanup()。
如果您在呼叫 render 時未呼叫 cleanup，則可能會導致記憶體洩漏和非冪等的測試 (這可能會導致測試中難以除錯的錯誤)。