チートシート
React Testing Libraryでエクスポートされるすべての関数の簡単なガイド
- render
const {/* */} = render(Component)は以下を返します- コンポーネントをアンマウントする
unmount関数 - コンポーネントがマウントされているDOMノードへの
container参照 - ドキュメントにバインドされた
DOM Testing Libraryからのすべてのクエリ。そのため、最初の引数としてノードを渡す必要はありません (通常、代わりにscreenインポートを使用できます)
- コンポーネントをアンマウントする
import {render, fireEvent, screen} from '@testing-library/react'
test('loads items eventually', async () => {
render(<Page />)
// Click button
fireEvent.click(screen.getByText('Load'))
// Wait for page to update with query text
const items = await screen.findAllByText(/Item #[0-9]: /)
expect(items).toHaveLength(10)
})
クエリ
DOM Testing Libraryとの違い
React Testing Libraryのrenderから返されるクエリは、最初の引数がドキュメントにバインドされている点を除いてDOM Testing Libraryと同じです。つまり、getByText(node, 'text')の代わりにgetByText('text')を使用します
どのクエリを使用すべきか？を参照してください
| 一致なし | 1つ一致 | 1つ以上一致 | Await？ | |
|---|---|---|---|---|
| getBy | throw | return | throw | いいえ |
| findBy | throw | return | throw | はい |
| queryBy | null | return | throw | いいえ |
| getAllBy | throw | 配列 | 配列 | いいえ |
| findAllBy | throw | 配列 | 配列 | はい |
| 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
非同期
dom-testing-library非同期APIは、React Testing Libraryから再エクスポートされます。
- waitFor（Promise）関数がスローしなくなるかタイムアウトするまで、関数を再試行します
- waitForElementToBeRemoved（Promise）DOMノードを返さなくなるまで関数を再試行します
イベント
イベントAPIを参照してください
- fireEvent DOMイベントをトリガーします：
fireEvent(node, event) - fireEvent.* デフォルトのイベントタイプのヘルパー
- click
fireEvent.click(node) - サポートされているすべてのイベントを参照してください
- click
- act react actのラッパー。React Testing Libraryは、renderとfireEventをすでに
actの呼び出しでラップしているため、ほとんどの場合、手動で使用する必要はありません
その他
要素内でのクエリ、Config API、クリーンアップを参照してください
- within ノードを受け取り、ノードにバインドされたすべてのクエリを持つオブジェクトを返します（
React Testing Libraryのrenderメソッドからクエリを返すために使用されます）：within(node).getByText("hello") - configure グローバルオプションを変更します：
configure({testIdAttribute: 'my-data-test-id'}) - cleanup DOMをクリアします（テスト間でDOMをリセットするために
afterEachで使用）
テキスト一致オプション
次のHTMLが与えられた場合
<div>Hello World</div>
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'))