React環境でのTDDの概要 - Reactで学ぶTDD 第1回

コンポーネントを堅牢にする方法

• ユーザーの操作を検証する
  「ログインボタンを押すと、読み込み画面が出てメインページへ移動するか」といったシナリオを検証します。
• ビジネスロジックを確認する
  「カートに入れた商品の合計に10%の割引が適用されるか」といった計算を確認します。
• 回帰テスト（Regression Test）
  新機能を追加したときに、ユーザー登録など、すでに動いていた機能が壊れていないかを自動で確認します。

// 이 테스트만 봐도 Button 컴포넌트의 주 사용법을 알 수 있습니다.
test('클릭하면 onClick 함수가 실행된다', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>저장</Button>);
  
  fireEvent.click(screen.getByText('저장'));
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});

• テストすること（○）
  • ユーザーがボタンを押したときに起こること。
  • フォームに文字を入力したときの値の変化。
  • エラーが起きたとき、画面にメッセージが表示されるか。
• テストを省くこと（×）
  • コンポーネント内部のstate名が isVisible か show か。
  • React
    自体が正しく動くか。useStateの検証は
    React
    チームが行います。
  • CSSが適用されたかどうかだけの確認。これは視覚的テストツールの対象です。

画像の案 [氷山の図。水面上の画面やユーザーの操作はテスト対象、水面下の内部変数や実装は対象外]

• Jest
  テストを実行し、結果を示す
  テストランナー
  です。バックエンドのJUnitに似ています。
• React Testing Library（RTL）
  React
  コンポーネントを仮想環境で描画し、クリックや入力などの操作を再現するツールです。
• MSW（Mock Service Worker）
  ネットワークリクエストを捕捉し、モックデータを返すツールです。

次回はプロジェクトを作り、

Jest

と

React Testing Library

を設定して、最初のテスト環境を用意します。

• Testing Library Docs↗
  今後使うReact Testing Libraryの公式ドキュメントです。
• Why TDD?↗
  RTLの作者Kent C. Doddsが、なぜテストを書くのかを説明した記事です。