# フロントエンドテスト https://zenn.dev/koki_tech/articles/a96e58695540a7 > > テストを書く主な目的は、 > > - 開発効率と開発体験を上げる > - 開発製品の品質の担保 > - 画面に不具合が発生し、ユーザーの期待通りの挙動にならないことを防ぐ > > 具体的にはテストを導入することで、 > > - 開発中に早い段階でエラーを発見しやすくし開発コストを減らすことができる > - 機能が増えた時に、既存の機能を壊さない可能性を上げる > - ユーザーの操作が期待通りかをチェックできる > - といった恩恵を得ることができます。 > > https://qiita.com/KNR109/items/7cf6b24bed318dab5715 # テスト種別 - Static Test (静的テスト) - Unit Test (単体テスト) - Integration Test (結合テスト) - End to End Test (E2Eテスト) 下に行けば行くほど - テストの速度は遅くなる - 実装コストは高くなる - テストの信頼性が高くなる ## Static Test (静的テスト) 静的テストとはコードのタイプミス(タイポ)や型エラーをチェックするテストです。FlowやTypeScriptなどの静的型解析を導入することでチェックすることができます。 ## Unit Test (単体テスト) 単体テストは個々の独立した関数やコンポーネントが動作するかをチェックするテストです。 単体テストのテストツールとしてはJestが一番人気のフレームワークになっています。 またReactコンポーネント指向においては「コンポーネントが担う責務を明確にする」という単一原則というものがあります。 この考えに基づいたコンポーネント設計(良いコンポーネント設計)をすることでユニットテストを書くことができます。 Reactのコンポーネント指向の考え方については、下記のの記事でわかりやすく解説されています。 React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】 | in-Pocket インポケット https://www.i3design.jp ## Integration Test (結合テスト) 結合テストは各コンポーネントや関数を組み合わせた時に機能が問題なく動作するかをチェックするテストです。 結合テストのテストツールとしては、JestやReact Testing Libraryがあります。 ## End to End Test (E2Eテスト) E2EテストはサーバーのAPIやブラウザ等の環境でアプリケーションを動かし、システム全体が正しく動くかをチェックするテストです。 E2Eのテストツールとしては、Cypress、Puppeteerが挙げられます。 # テスト項目 ## Rendering - 画面の初期表示 - 全てのページ - 権限による表示出し分け - Student/Company/非ログインユーザ - API レスポンス形式に応じ - 全てのページ ## Action - ユーザー操作の結果に応じた画面の変化 - 追加/編集/削除 - フォームサブミット時の API 呼び出しの結果 - 追加/編集/削除 - ページナビゲーション ## Validation - フォームのバリデーション - 追加/編集/削除 https://engineering.mercari.com/blog/entry/20211208-test-automation-policy-in-merpay-frontend/ # Linter - Static Test (静的テスト) # Vitest - Unit Test (単体テスト) - Integration Test (結合テスト) # Cypress - End to End Test (E2Eテスト)