Unable to find element by text の解決方法（Jest × React Testing Library）

はじめに

React + TypeScript + Chakra UI + Supabase を使った「学習記録アプリ」を Jest でテストする際に、実際に詰まったエラーと解決方法をまとめます。

3. Unable to find element by text

状況:

テキストマッチングで失敗。

原因:

実際の UI の文言が異なっていた（例: 実装は「学習記録」なのに、テストは「学習記録アプリ」を探していた）。

バリデーションエラーメッセージの文言が実装とずれていた。

解決方法:

テストコードを UI に合わせて修正。

expect(await screen.findByText(/学習記録/i)).toBeInTheDocument();
expect(await within(dialog).findByText(/時間は1以上である必要があります/i)).toBeInTheDocument();

UI の実際の表示に合わせてテストを修正する。

まとめ

テストが失敗したときは、UIに表示される正確な文言と、テストで使っているテキストが一致しているかを必ず確認。