Claude Codeでテスト追加と検証コマンド実行を行う
変更に対するテストを追加し、lint/typecheck/test/buildまで確認する手順
最終更新:2026/05/08
この記事では、修正後に品質を確認する流れを扱う。
「動いた気がする」で終わらせず、検証コマンドで判定する。
このステップでやること
- テスト観点を整理
- 既存テストが無ければ最小構成でテスト基盤を追加
lint / typecheck / test / buildを実行- 失敗時は原因調査して最小修正
実行前チェック(3分)
package.json に対象スクリプトがあるか確認する。
cd ~/sandbox/claude-code-practice/form-bug-demo
node -e "const p=require('./package.json'); console.log(Object.keys(p.scripts||{}).join('\n'))"typecheckが無い場合はpnpm tsc --noEmitを代替で使うtestが無い場合は、最低限lintとbuildを実行して報告する
テストがまだ無い場合(このハンズオンはこちら)
create-next-app 直後はテスト基盤が無いことが多い。
その場合は、先に次をClaude Codeへ依頼する。
このプロジェクトにはテスト基盤がないため、最小構成で追加してください。
要件:
- テストランナーは Vitest を使う
- React Testing Library を使う
- `pnpm test` で実行できるよう package.json の scripts を更新
- 今回の対象 `/contact` のテストを1ファイル追加
- email 空: 送信できない
- email あり: 送信できる
変更後、追加/変更したファイル一覧と実行コマンドを報告してください。実行依頼テンプレート
既存テストがあればその書き方に合わせ、無ければ最小構成で追加した上で、
/contact の email必須化修正に対するテストを追加してください。
最低限、次のケースを含めてください。
- email 空: 送信できない
- email あり: 送信できる
その後、以下を実行してください。
- pnpm lint
- pnpm typecheck
- pnpm test
- pnpm build
失敗した場合は原因を調査し、必要最小限で修正してください。
typecheck が無い場合は pnpm tsc --noEmit を代替で使ってください。実務での確認ポイント
1. テストは「今回の変更」に絞る
関連しない領域まで拡張すると、レビューコストが上がる。
2. 既存テストの流儀に合わせる
アサーション(assertion、テスト内で「この値はこうであるべき」と検証する記述)の書き方、テストデータの作り方、命名規則をそろえる。
3. コマンド結果を報告させる
最低限、次をセットで報告させる。
- 実行コマンド
- 成否
- 失敗した場合の原因
- 実施した追加修正
失敗時の依頼例
pnpm test が失敗している原因を調査し、今回の変更の範囲内で最小修正してください。
修正後に再度 pnpm test を実行し、結果を報告してください。