awesome-hacks
Docs

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 が無い場合は、最低限 lintbuild を実行して報告する

テストがまだ無い場合(このハンズオンはこちら)

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 を実行し、結果を報告してください。