チートシート

DOM Testing Libraryでエクスポートされるすべての関数の簡単なガイド

クエリ

	一致なし	1つのマッチ	1つ以上のマッチ	非同期？
getBy	例外をスロー	返す	例外をスロー	いいえ
findBy	例外をスロー	返す	例外をスロー	はい
queryBy	null	返す	例外をスロー	いいえ
getAllBy	例外をスロー	配列	配列	いいえ
findAllBy	例外をスロー	配列	配列	はい
queryAllBy	[]	配列	配列	いいえ

ByLabelText ラベルまたはaria-labelテキストの内容で検索
- getByLabelText
- queryByLabelText
- getAllByLabelText
- queryAllByLabelText
- findByLabelText
- findAllByLabelText
ByPlaceholderText 入力プレースホルダーの値で検索
- getByPlaceholderText
- queryByPlaceholderText
- getAllByPlaceholderText
- queryAllByPlaceholderText
- findByPlaceholderText
- findAllByPlaceholderText
ByText 要素のテキストコンテンツで検索
- getByText
- queryByText
- getAllByText
- queryAllByText
- findByText
- findAllByText
ByDisplayValue フォーム要素の現在の値で検索
- getByDisplayValue
- queryByDisplayValue
- getAllByDisplayValue
- queryAllByDisplayValue
- findByDisplayValue
- findAllByDisplayValue
ByAltText imgのalt属性で検索
- getByAltText
- queryByAltText
- getAllByAltText
- queryAllByAltText
- findByAltText
- findAllByAltText
ByTitle title属性またはsvgのtitleタグで検索
- getByTitle
- queryByTitle
- getAllByTitle
- queryAllByTitle
- findByTitle
- findAllByTitle
ByRole ariaロールで検索
- getByRole
- queryByRole
- getAllByRole
- queryAllByRole
- findByRole
- findAllByRole
ByTestId data-testid属性で検索
- getByTestId
- queryByTestId
- getAllByTestId
- queryAllByTestId
- findByTestId
- findAllByTestId

非同期

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

waitFor (Promise) 関数を例外がスローされなくなるまで、またはタイムアウトするまで再試行します。
waitForElementToBeRemoved (Promise) DOMノードを返さなくなるまで関数を再試行します。

v7.0.0以降非推奨
wait (Promise) 関数を例外がスローされなくなるまで、またはタイムアウトするまで再試行します。
waitForElement (Promise) 関数が要素または要素の配列を返すまで再試行します。`findBy`と`findAllBy`クエリは非同期であり、クエリが正常に返されるまで、またはクエリがタイムアウトするまで再試行します。これらは`waitForElement`をラップしています。
waitForDomChange (Promise) DOMが変更されるたびに関数を再試行します。

イベント

fireEventに関する考慮事項、イベントAPIを参照してください。

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

その他

要素内でのクエリ、設定APIを参照してください。

within ノードを受け取り、ノードにバインドされたすべてのクエリを含むオブジェクトを返します（`React Testing Library`のrenderメソッドからクエリを返すために使用されます）：`within(node).getByText("hello")`
configure グローバルオプションを変更します: `configure({testIdAttribute: 'my-data-test-id'})`

テキストマッチオプション

次のHTMLを想定します。

<div>Hello World</div>

見つける div

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

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

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

しばらく後にページを更新するボタンがあるとします。

test('loads items eventually', async () => {
  // Click button
  fireEvent.click(getByText(node, 'Load'))

  // Wait for page to update with query text
  const items = await findAllByText(node, /Item #[0-9]: /)
  expect(items).toHaveLength(10)
})

クエリ​

非同期​

イベント​

その他​

テキストマッチオプション​

クエリ

非同期

イベント

その他

テキストマッチオプション