React テスト
React Testing Library、Jest、Vitest、コンポーネントテスト、mocking、ユーザーインタラクション、coverage
1React Testing Library における getBy、queryBy、findBy の主な違いは何ですか？
React Testing Library における getBy、queryBy、findBy の主な違いは何ですか？
回答
getBy は要素が存在しない場合にエラーをスローします（同期的な assertions）。queryBy は要素が存在しない場合に null を返します（不在の確認）。findBy は非同期要素のために Promise を返します。存在すべき要素にはデフォルトで getBy を、要素が存在しないことを確認するには queryBy を、遅延後に要素が表示されるのを待つには findBy を使用してください。
2getByTestId と比べた getByRole の主な利点は何ですか？
getByTestId と比べた getByRole の主な利点は何ですか？
回答
getByRole は、セマンティックな ARIA ロール（button、textbox、heading）で要素を対象にすることで、アクセシビリティのベストプラクティスを促進し、スクリーンリーダーに対するコンポーネントのアクセシビリティを向上させます。getByTestId は、エンドユーザーに価値を提供しない人工的な data-testid 属性の追加を必要とします。React Testing Library は、getByTestId の前に getByRole、getByLabelText、getByText を優先することを推奨しています。
3DOM に存在しない要素の条件付きレンダリングをテストするにはどうすればよいですか？
DOM に存在しない要素の条件付きレンダリングをテストするにはどうすればよいですか？
回答
queryBy を使用して要素の不在を確認します。エラーをスローする代わりに null を返すためです。例：expect(screen.queryByText('Error')).toBeNull() または expect(screen.queryByText('Error')).not.toBeInTheDocument()。getBy はエラーをスローしてテストを失敗させ、findBy は要素の出現を待ちます（不在の場合はタイムアウト）。
React Testing Library が実装の詳細をテストしないことを推奨するのはなぜですか？
React Testing Library における render と screen の違いは何ですか？
+17 面接問題