senior-qa

シニア QA エンジニア

React および Next.js アプリケーション向けのテスト自動化、カバレッジ分析、品質保証のパターンです。Jest + React Testing Library の単体テストのスタブを生成し、Istanbul/LCOV のカバレッジを分析して不足箇所を特定し、App Router と Pages Router のプロジェクト向けに Playwright E2E テストスイートを構築します。

主な機能

• 単体テストの生成 — React/TypeScript コンポーネントをスキャンし、Jest + RTL のスタブ（レンダリング、インタラクション、状態、任意で jest-axe によるアクセシビリティテスト）を出力します。
• カバレッジ分析 — Istanbul/LCOV レポートを解析し、重大度別に不足箇所を特定し、重要なビジネスロジックの経路にフラグを立て、テキスト／HTML／JSON 形式の推奨事項を出力します。
• E2E テストの構築 — Next.js のルート（動的セグメント、ルートグループ、認証ページ）を検出し、Playwright のテスト仕様、ページオブジェクトモデル、フィクスチャ、設定ファイルを生成します。
• テスト戦略 — テストピラミッド、コードの種類ごとのカバレッジ目標、テストの編成パターンを説明します。
• 自動化パターン — ページオブジェクトモデル、データファクトリー、MSW によるモック、フィクスチャ、カスタムレンダー用ユーティリティを扱います。
• 品質プラクティス — テストしやすいコード設計、AAA 構造、テストの分離、不安定なテストの排除、品質指標を扱います。

使用する場面

• 新規または既存の React コンポーネントに単体テストを設定する場合。
• テストカバレッジを改善する場合や、リリースの準備をする場合。
• Next.js プロジェクトに Playwright E2E テストを設定する場合。
• Jest のしきい値を設定する場合や、全体的なテスト品質を改善する場合。

先に確認すること

テストを生成する前に、次の情報を確認してください。不明または曖昧な項目があれば、推測せずに質問してください。

• テストレイヤー — 単体テスト（Jest+RTL）か E2E（Playwright）か（test_suite_generator と e2e_test_scaffolder のどちらを使うかを決定します）
• ソースパス — テスト生成の対象となるコンポーネントまたは Next.js ルート（スキャフォルダーへの入力）
• カバレッジの重点 — 正常系のみか、インタラクション／状態／アクセシビリティ（jest-axe）も対象にするか（出力するテストスタブを決定します）

停止ルール：出力を大きく左右する 2～3 項目だけを質問してください。ユーザーが「とりあえず作成して」と言った場合は、そのまま進め、成果物の冒頭に前提を記載してください。

ツール

ツール	目的	コマンド
test_suite_generator.py	React コンポーネントから Jest + RTL のテストスタブを生成します	python scripts/test_suite_generator.py src/components/ --output __tests__/
coverage_analyzer.py	Istanbul/LCOV のカバレッジを分析し、不足箇所を報告します	python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
e2e_test_scaffolder.py	Next.js のルートから Playwright E2E テストを構築します	python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

参考資料

タスクに合った参考資料を読み込んでください。このファイルは簡潔に保ち、必要に応じて詳細を参照します。

• references/qa-workflows-and-tools.md — クイックスタート、3 つのツールの概要と出力例、単体テスト／カバレッジ／E2E のワークフロー、よく使われるパターンのスニペット（RTL クエリ、非同期処理、MSW、Playwright ロケーター、Jest のしきい値）、よく使うコマンド、トラブルシューティング表、成功基準を掲載しています。ワークフローの実行時に読んでください。
• references/tool-cli-reference.md — 3 つのスクリプトすべてのフラグ一覧、例、出力形式、生成される成果物を掲載しています。スクリプトの実行前に読んでください。
• references/testing_strategies.md — テストピラミッド、テストの種類、カバレッジ目標としきい値、テストの編成パターンを掲載しています。テスト戦略の設計時に読んでください。
• references/test_automation_patterns.md — ページオブジェクトモデル、データファクトリー、フィクスチャ管理、モック戦略（MSW）、カスタムテストユーティリティを掲載しています。テストコードの作成時に読んでください。
• references/qa_best_practices.md — テストしやすいコードの書き方、命名規則、AAA パターン、テストの分離、不安定なテストのデバッグ、品質指標を掲載しています。テスト品質の改善時に読んでください。

対象範囲と制限事項

このスキルの対象：

• Jest と React Testing Library を使用した、React/TypeScript の関数コンポーネントおよびクラスコンポーネント向けユニットテストのスタブ生成。
• Istanbul JSON および LCOV レポート形式からのカバレッジ分析と不足箇所の特定。
• Playwright を使用した、Next.js App Router および Pages Router プロジェクト向け E2E テストのひな形作成。
• jest-axe との連携によるアクセシビリティテストの生成。

このスキルの対象外：

• バックエンド API テスト（Express/Node.js のテストパターンについては senior-backend を参照してください）。
• パフォーマンステストや負荷テスト（インフラストラクチャおよびパフォーマンス関連ツールについては senior-devops を参照してください）。
• ビジュアルリグレッションテストやスクリーンショット比較のワークフロー。
• モバイルネイティブテスト（React Native、Flutter）。このスキルの対象は、ウェブブラウザー上でのテストのみです。

統合ポイント

スキル	統合	データフロー
senior-frontend	生成されるテストスタブは、フロントエンドスキルのコンポーネントパターンに沿っています	フロントエンドコンポーネント --> test_suite_generator.py --> テストファイル
senior-fullstack	コード品質アナライザーは、このスキルで生成されるものと同じカバレッジレポートを使用します	coverage_analyzer.py の出力 --> フルスタック品質ダッシュボード
senior-devops	E2E テストスキャフォルダーは、DevOps パイプラインに組み込める CI 対応の Playwright 設定を生成します	e2e_test_scaffolder.py --> playwright.config.ts --> GitHub Actions ワークフロー
code-reviewer	カバレッジの不足箇所を、テストされていない変更に関するコードレビューのチェックリストに直接反映します	coverage_analyzer.py の不足箇所 --> レビューチェックリスト項目
tdd-guide	TDD ワークフローでは、初期のレッドフェーズ用スタブの作成に、このスキルのテストジェネレーターを使用します	TDD サイクル --> test_suite_generator.py --scan-only --> テストを記述 --> 実装
qa-browser-automation	ここで生成されるページオブジェクトモデルは、高度な E2E シナリオ向けにブラウザー自動化スキルで使用されます	e2e_test_scaffolder.py --include-pom --> POM クラス --> ブラウザー自動化フロー