Set up frontend test infrastructure

Install @testing-library/react, @testing-library/jest-dom,
@testing-library/user-event, and jsdom. Configure Vitest with globals,
jsdom environment, and a setup file importing jest-dom matchers. Add a
custom render helper wrapping components with QueryClientProvider and
MemoryRouter. Exclude e2e/ from vitest. Smoke test covers
formatEvolutionMethod.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-21 13:35:15 +01:00
parent ee5bf03f19
commit c80d7d0802
9 changed files with 948 additions and 13 deletions

View File

@@ -1,11 +1,11 @@
---
# nuzlocke-tracker-d8cp
title: Set up frontend test infrastructure
status: draft
status: completed
type: task
priority: normal
created_at: 2026-02-10T09:33:33Z
updated_at: 2026-02-10T09:34:00Z
updated_at: 2026-02-21T12:32:34Z
parent: nuzlocke-tracker-yzpb
blocking:
- nuzlocke-tracker-ee9s
@@ -16,14 +16,14 @@ Set up the test infrastructure for the React/TypeScript frontend. No testing too
## Checklist
- [ ] Install Vitest, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, jsdom
- [ ] Configure Vitest in `vite.config.ts` or a dedicated `vitest.config.ts`
- [ ] Set up jsdom as the test environment
- [ ] Create a test setup file (e.g. `src/test/setup.ts`) that imports @testing-library/jest-dom matchers
- [ ] Create test utility helpers (e.g. render wrapper with providers — QueryClientProvider, BrowserRouter)
- [ ] Add a \`test\` script to package.json
- [ ] Verify the setup by writing a simple smoke test
- [ ] Set up MSW (Mock Service Worker) or a similar API mocking strategy for hook/component tests
- [x] Install Vitest, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, jsdom
- [x] Configure Vitest in `vite.config.ts` or a dedicated `vitest.config.ts`
- [x] Set up jsdom as the test environment
- [x] Create a test setup file (e.g. `src/test/setup.ts`) that imports @testing-library/jest-dom matchers
- [x] Create test utility helpers (e.g. render wrapper with providers — QueryClientProvider, BrowserRouter)
- [x] Add a \`test\` script to package.json
- [x] Verify the setup by writing a simple smoke test
- [x] Set up MSW (Mock Service Worker) or a similar API mocking strategy for hook/component tests — using `vi.mock` instead; MSW deferred until needed
## Notes

View File

@@ -22,7 +22,7 @@ Add comprehensive unit and integration test coverage to both the backend (FastAP
- [x] Backend test infrastructure is set up (conftest, fixtures, test DB)
- [ ] Backend schemas and services have unit test coverage
- [ ] Backend API endpoints have integration test coverage
- [ ] Frontend test infrastructure is set up (Vitest, RTL)
- [x] Backend API endpoints have integration test coverage
- [x] Frontend test infrastructure is set up (Vitest, RTL)
- [ ] Frontend utilities and hooks have unit test coverage
- [ ] Frontend components have basic render/interaction tests