Frontend テスト自動化

みてるぞがコメント

2025-10-13 17:28:16 +09:00

オーナー

背景

現在、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 を対象にしてください。

不明点があれば、実装前に調査結果と選択肢を提示してください。

## 背景現在、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 を対象にしてください。不明点があれば、実装前に調査結果と選択肢を提示してください。