Julian Tabel
c80d7d0802
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>
1.5 KiB
1.5 KiB
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 | completed | task | normal | 2026-02-10T09:33:33Z | 2026-02-21T12:32:34Z | nuzlocke-tracker-yzpb |
|
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.tsor a dedicatedvitest.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 — using
vi.mockinstead; MSW deferred until needed
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