#155 Frontend テスト自動化

## 背景 現在、backend は RSpec によるテスト体制がある一方で、frontend には同等の自動テスト機構がない。 そのため、React コンポーネント、hooks、TanStack Query 周辺、URL エンコード、権限分岐などを Codex や人間が修正した際に、既存挙動を壊しても検知しづらい。 この issue では、frontend にテスト基盤を導入し、今後の UI / hooks 修正を安全に進めるための最小構成を整える。 ## 対象範囲 - backend: なし - frontend: - `package.json` - Vite / Vitest 設定 - test setup file - 最小限のサンプルテスト - docs: - 必要なら frontend のテスト実行方法を追記 - migration: なし ## やること - [ ] frontend に Vitest を導入する - [ ] React Testing Library を導入する - [ ] jsdom 環境で React コンポーネントをテストできるようにする - [ ] `npm test` または `npm run test` でテストを実行できるようにする - [ ] `npm run test:run` など、CI / Codex 向けの非 watch 実行コマンドを追加する - [ ] `@testing-library/jest-dom` を setup する - [ ] 最小限のサンプルテストを 1 つ追加する - [ ] 既存の `npm run build` と `npm run lint` が通る状態を維持する ## 受け入れ条件 - [ ] `cd frontend && npm install` 後にテスト関連依存が解決できる - [ ] `cd frontend && npm run test:run` が成功する - [ ] `cd frontend && npm run build` が成功する - [ ] `cd frontend && npm run lint` が成功する - [ ] 追加されたテストが実際に React コンポーネントまたは frontend utility を検証している - [ ] テスト導入のために production code を不必要に変更していない - [ ] backend 側のコード・migration・schema に変更がない ## 実行すべき確認 - [ ] `cd frontend && npm install` - [ ] `cd frontend && npm run test:run` - [ ] `cd frontend && npm run build` - [ ] `cd frontend && npm run lint` ## 禁止事項 - unrelated refactor はしない - 既存 API response shape を壊さない - 認証・認可・BAN を弱めない - backend には触らない - UI の見た目や挙動をこの issue で変更しない - 既存コンポーネントを大量に書き換えない - E2E テスト導入まで広げない - Playwright / Cypress はこの issue では導入しない - テストを通すために実装側を不自然に弱めない ## Codex への指示 この issue では、frontend の単体・コンポーネントテスト基盤だけを導入してください。 まず `frontend/package.json` と既存の Vite / TypeScript / ESLint 設定を確認してください。 現状 frontend には test script がない前提で、Vitest + React Testing Library + jsdom の最小構成を追加してください。 追加する devDependencies の候補: - `vitest` - `@testing-library/react` - `@testing-library/jest-dom` - `@testing-library/user-event` - `jsdom` 必要に応じて `vitest.config.ts` または `vite.config.ts` の test 設定、`src/test/setup.ts` のような setup file を追加してください。 サンプルテストは最小限でよいです。既存コンポーネントの構造が重い場合は、単純な utility や小さな UI component を対象にしてください。 不明点があれば、実装前に調査結果と選択肢を提示してください。