API
Vue Testing Library は DOM Testing Library からすべてを再エクスポートします。
また、これらのメソッドも公開しています。
render(Component, options)
render 関数は、Vue Testing Libraryでコンポーネントをレンダリングする唯一の方法です。
最大2つのパラメータを受け取り、いくつかのヘルパーメソッドを持つオブジェクトを返します。
function render(Component, options) {
return {
...DOMTestingLibraryQueries,
container,
baseElement,
debug(element),
unmount,
html,
emitted,
rerender(props),
}
}
パラメータ
Component
テスト対象の有効なVueコンポーネント。
Options
@vue/test-utils mount に渡される追加情報を格納したオブジェクト。
さらに、以下のオプションも提供できます。
store (Object | Store)
Vuex ストア のオブジェクト定義。store オブジェクトが提供されると、Vue Testing Library は Vuex ストアをインポートして設定します。インスタンス化された Vuex ストアを渡すと、それが使用されます。
routes (Array | VueRouter)
Vue Router のルートのセット。routes が提供されると、ライブラリは Vue Router をインポートして設定します。インスタンス化された Vue Router を渡すと、それが使用されます。
props (Object)
propsData とマージされます。
container (HTMLElement)
デフォルトでは、Vue Testing Library は div を作成し、baseElement に追加します。ここにコンポーネントがレンダリングされます。このオプションで独自の HTMLElement コンテナを提供すると、baseElement に自動的に追加されません。
例：tablebody 要素の単体テストを行う場合、div の子要素にすることはできません。この場合、レンダリングcontainerとしてtableを指定できます。
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 Testing Library のクエリが、最初の引数が baseElement （デフォルトは document.body）にバインドされて自動的に返されることです。
クエリ を参照して、完全なリストを確認してください。
const {getByLabelText, queryAllByTestId} = render(Component)
container
レンダリングされたVueコンポーネントを含むDOMノード。デフォルトではdivです。これは通常のDOMノードなので、container.querySelectorなどを呼び出して子要素を検査できます。
ヒント：レンダリングされた要素のルート要素を取得するには、
container.firstChildを使用します。
🚨 レンダリングされた要素のクエリに
containerを使用している場合は、再考する必要があります！他のクエリは、テスト対象のコンポーネントに加えられる変更に対してより柔軟性があります。要素のクエリにはcontainerを使用しないでください！
baseElement
container内でVueコンポーネントがレンダリングされる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 Testing Libraryからも提供されます）をラップしたシンプルなラッパーです。
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 Testing Library は 2 つの便利なメソッドを公開しています。
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 で制御される入力を適切に処理します。入力/選択/テキストエリアの内部値を更新し、適切なネイティブイベントを発行します。
update の動作例については、v-model の例テスト を参照してください。
cleanup
render でマウントされた Vue ツリーをアンマウントします。
テストフレームワーク（mocha、Jest、Jasmineなど）がグローバルな
afterEach()関数をテスト環境に注入した場合、これは自動的に呼び出されます。そうでない場合は、各テストの後にcleanup()を呼び出す必要があります。
renderを呼び出したときにcleanupを呼び出さないと、メモリリークやべき等でないテスト（テストでデバッグが困難なエラーにつながる可能性があります）が発生する可能性があります。