nuzlocke-tracker/.beans/nuzlocke-tracker-d8cp--set-up-frontend-test-infrastructure.md

title, status, type, priority, created_at, updated_at, parent, blocking

title	status	type	priority	created_at	updated_at	parent	blocking
Set up frontend test infrastructure	draft	task	normal	2026-02-10T09:33:33Z	2026-02-10T09:34:00Z	nuzlocke-tracker-yzpb	nuzlocke-tracker-ee9s nuzlocke-tracker-1guz

Set up the test infrastructure for the React/TypeScript frontend. No testing tooling currently exists.

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

Notes

• Vitest integrates natively with Vite, which the project already uses
• React Testing Library is the standard for testing React components
• The app uses React Query (TanStack Query) and React Router — the test wrapper needs to provide these contexts
• MSW is recommended for mocking API calls in hook and component tests, but simpler approaches (vi.mock) may suffice initially