これは「フロントエンド開発のためのテスト入門」の第３章〜第６章で解説する、トレーニングリポジトリです。対象読者は、初めてフロントエンドのテストに取り組まれる方を想定しており、Jestの基本的な使用方法から解説しています。

• 第３章 はじめの単体テスト
• 第４章 モック
• 第５章 UI コンポーネントテスト
• 第６章 カバレッジレポートの読み方

Jest を使用したテストコードを解説します。はじめてテストに取り組まれる方にとって、最適な内容です。

【サンプルコード】src/03/**/*.test.ts

$ npm test

テストを実施するうえで、必要不可欠な「モック」について解説します。Jest は標準でモック機能を備えています。

【サンプルコード】src/04/**/*.test.ts

$ npm test

Node.js には DOM API がありませんが、jsdom という DOM API をシュミレートするテスト環境を用意することで、実際のブラウザでテストするのと同じようなテストが「高速に」実施できます。Testing Library は、そのテスト環境において、UIコンポーネントテストをサポートするライブラリです。

【サンプルコード】src/05/**/*.test.tsx

$ npm test

単体テスト・結合テストに慣れたら、カバレッジレポートを確認して、不足しているテストを見つけてみましょう。カバレッジレポートを確認することで、テストコードを書くポイントがはっきりします。

【サンプルコード】src/06/**/*.test.{ts,tsx}

$ npm test