tests-prompts/frontend-unit-tests.md

Frontend Unit Tests Generation Prompt

Generate complete Jest test suites that provide thorough test coverage for the frontend components and logic.

Tech Stack

• React 18 + TypeScript + Vite
• Material-UI v5 + TanStack React Query + React Router DOM v6
• Jest 29 + React Testing Library + jsdom

Requirements

• Include unit tests for components, hooks, utils, and state management.
• Cover positive and negative test cases, edge conditions, user interactions, async operations, and mocked external dependencies.
• Focus on testing business-critical functionality and user flows.
• Add clear test descriptions and organize tests logically using describe/it blocks.

Test Structure

• Place tests in src/__tests__/ mirroring source structure
• Use ComponentName.test.tsx naming convention
• Group tests with describe blocks for rendering, interactions, and form handling

Test Scenarios

Components: Test loading/error/empty/success states, user interactions, form validation/submission, navigation, accessibility

Services: Mock API calls, test React Query integration, error handling, loading states

Providers Setup

Wrap components with:

• QueryClientProvider (disable retry: false for tests)
• MemoryRouter for routing components

Quality Standards

• Follow AAA pattern (Arrange, Act, Assert)
• Use beforeEach for setup and mock resets
• Test business-critical paths and error conditions
• Verify Material-UI component integration and accessibility