チートシート

Vue Testing Library のすべてのエクスポート関数に関する簡単なガイドです。

クエリ

DOM Testing Libraryとの違い

Vue Testing Library の render から返されるクエリは DOM Testing Library と同じです。ただし、最初の引数はドキュメントにバインドされているため、getByText(node, 'text') の代わりに getByText('text') と記述します。

検索バリアント

	一致しない場合の戻り値	1件一致した場合の戻り値	複数一致した場合の戻り値	Awaitが必要か？
getBy...	例外をスロー	値を返す	例外をスロー	不要
findBy...	例外をスロー	値を返す	例外をスロー	必要
queryBy...	null	値を返す	例外をスロー	不要
getAllBy...	例外をスロー	配列	配列	不要
findAllBy...	例外をスロー	配列	配列	必要
queryAllBy...	[]	配列	配列	不要

検索タイプ

	検索対象	DOMの例
...ByLabelText	labelまたはaria-labelのコンテンツ	<label for="element" />
...ByPlaceholderText	inputのプレースホルダー値	<input placeholder="name" />
...ByText	要素のテキストコンテンツ	<p>Lorem ipsum</p>
...ByDisplayValue	フォーム要素の現在の値	input要素の現在の値
...ByAltText	imgのalt属性	<img alt="movie poster" />
...ByTitle	title属性またはsvgのtitleタグ	<span title="Add" /> または <title />
...ByRole	ARIA role	<div role="dialog" />
...ByTestId	data-testid属性	<div data-testid="some-message" />

検索バリアントと検索タイプの任意の組み合わせを記述できます。

例

getByLabelText('Username') は、文字列 "Username" を含む <label> 要素を検索し、関連付けられた input を返します。見つからない場合、または複数見つかった場合は、エラーをスローします。

queryAllByRole('nav') は、role="nav" 属性を持つすべての要素を同期的に検索し、結果を含む配列を返します（結果が見つからない場合は空の配列）。

詳細については、どのクエリを使用すればよいですか？ を参照してください。

非同期ユーティリティ

• **waitFor** (Promise) は、例外をスローしなくなるかタイムアウトになるまで関数を再試行します。
• **waitForElement** (Promise) は、関数または関数配列を再試行し、結果を返します。
• findBy および findAllBy クエリは非同期で、タイムアウトまたはクエリが正常に返されるまで再試行します。 これらは waitForElement をラップしています。

詳細については、DOM Testing Library Async API を参照してください。

テストでは、非同期関数の結果を await または .then() することを忘れないでください！

イベントの発生

• **fireEvent()** DOMイベントをトリガーします: fireEvent(node, event)
• **fireEvent.* デフォルトのイベントタイプのヘルパー
  • **click** fireEvent.click(node)
  • **input** `fireEvent.input(node, event)`
  • サポートされているすべてのイベントを参照してください

詳細については、Events API を参照してください。

DOM Testing Libraryとの違い

Vue Testing Library から返されるイベントはすべて非同期であるため、結果を await または then() する必要があります。

VTLはまた、 `v-model` を扱うために `fireEvent.update(node, value)` イベントを公開しています。 詳細はAPIを参照してください。

その他

• **within(node)** はノードを受け取り、すべてのクエリがバインドされたオブジェクトを返します: within(getByTestId("global-header")).getByText("hello").
• **configure(config)** グローバルオプションを変更します: configure({testIdAttribute: 'my-test-id'}).

詳細については、要素内でのクエリ および 設定API を参照してください。

テキスト一致オプション

以下のHTMLが与えられた場合

<div>Hello World</div>

これらのマッチャーはすべて **要素を見つけます:**

// Matching a string:
getByText('Hello World') // full string match
getByText('llo Worl', {exact: false}) // substring match
getByText('hello world', {exact: false}) // ignore case

// Matching a regex:
getByText(/World/) // substring match
getByText(/world/i) // substring match, ignore case
getByText(/^hello world$/i) // full string match, ignore case
getByText(/Hello W?oRlD/i) // advanced regex

// Matching with a custom function:
getByText((content, element) => content.startsWith('Hello'))