【要約】Testing Library の getByLabelText は 実際にレンダリングされる HTML に完全一致じゃないといけない [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者がChakra UIを用いたフォームのテストを行う際、ラベル名が正しいにもかかわらず要素が取得できない問題に直面する。これはUIライブラリによる自動的なDOM操作が原因である。
- ・Chakra UIの
isRequired設定により、ラベル末尾に*が自動付加される。 - ・
getByLabelTextは、ラベルのtextContent全体を完全一致で検証する。 - ・
aria-hidden属性が付与されていても、textContentには記号が含まれてしまう。
// Approach
開発者は、要素の取得方法を「テキスト内容」から「アクセシブルな名前」へと切り替えるアプローチを採用する。これにより、視覚的な装飾に左右されないテストが可能になる。
- ・
getByRoleを使用し、アクセシブルな名前でマッチングを行う（推奨）。 - ・
getByLabelTextにexact: falseを指定し、前方一致を許可する。 - ・
getByRoleを用いることで、aria-hidden要素を除外した検索を実現する。
// Result
適切なAPIを選択することで、UIの装飾変更に強いテストコードを実現できる。誰にとっても保守性の高いテスト環境が構築される。
- ・
getByRoleの採用により、必須インジケーター等の装飾に依存しないテストが可能になる。 - ・アクセシビリティの観点からも正しい要素取得が保証される。
- ・意図しない要素へのマッチングリスクを最小化できる。
Senior Engineer Insight
> UIライブラリの抽象化がテストに与える影響を正しく理解せよ。
textContentへの依存は、ライブラリの仕様変更や装飾の追加で容易に壊れる。getByRoleによるアクセシブルな名前でのテストは、実装の詳細を隠蔽し、ユーザー体験に即した堅牢な検証を可能にする。これは単なる回避策ではなく、アクセシビリティを重視した開発文化を支える重要なプラクティスである。