TL;DR
- TDD のアプローチで、React コンポーネントの動作を確かめる単体テストを書く。
- Testing Library で要素を取得するときは ARIA ロールを使うと、自然とアクセシビリティを守ったマークアップになる。
内容
TDD で React コンポーネントを作る
この章では、Testing Library を使った React のテストを扱う。TDD のアプローチでは、複雑なコンポーネントを小さな部品ごとに組み立てる。テストは一度に 1 つずつ書くことを意識する。道具には、TypeScript と React の JSX 構文、そして Testing Library（React Testing Library）を使う。
Testing Library で要素を取得するときは、ARIA ロールを使うことが推奨されている。ロールで要素を探すようにすると、自然とアクセシビリティを守ったマークアップになる。
セットアップ
単一の React コンポーネントを開発するので、Vite でプロジェクトを作る。
npm create vite carousel -- --template react-ts
cd carousel
npm install開発サーバは次のコマンドで立ち上げる。
npm run devこのあと ESLint、Prettier、Vitest、Testing Library を設定する（このメモでは省略）。
実践例
この章では、カルーセルを題材に 3 つのコンポーネントを TDD で実装する。
- シンプルな React Component を TDD で実装する
- 入れ子になった React Component を TDD で実装する
- 状態を持つ React Component を TDD で実装する