React Testing Library の検証（ .toBeInTheDocument() / .toHaveTextContent() ）についてまとめてみた

はじめに

React Testing Library でテストを書くとき、この「結果確認」が最後に必ず必要になります(テスト対象の画面が、想定した状態になっているかを expect でチェックすること)。

そこでこの記事では、まず覚えるべき3つのマッチャー をシンプルにまとめます。

1. 要素が存在するか確認：.toBeInTheDocument()

expect(element).toBeInTheDocument();

画面にその要素がちゃんとあるかを確認する。
「ボタンが表示されているか」「エラー文が出ているか」などでよく使います。

2. テキスト内容を確認：.toHaveTextContent()

expect(element).toHaveTextContent("ログイン成功");

要素の中にこの文字が入っているかを確認する。
ラベルやメッセージの内容が正しいかをチェックするのに便利。

3. 無効になっているか確認：.toBeDisabled()

expect(button).toBeDisabled();

ボタンや入力欄が操作できない状態かどうかを確認する。
逆に有効状態を確認したいときは .toBeEnabled() を使います。

まとめ

• 存在チェック → .toBeInTheDocument()

• 文字チェック → .toHaveTextContent()

• 無効チェック → .toBeDisabled()