congiuluc/testing-frontend

Frontend Testing (React)

When to Use

• Testing React components (rendering, interaction, accessibility)
• Testing custom hooks
• Mocking API calls or services
• Writing integration tests for pages/features
• Verifying form validation and submission

Official Documentation

• Vitest
• React Testing Library
• MSW (Mock Service Worker)
• jest-dom matchers

Core Rule

Every feature must have corresponding tests before it is considered complete.

Procedure

1. Follow React testing reference for patterns and conventions
2. Review component test sample
3. Query elements by accessible role/label — never by CSS class or test ID
4. Use userEvent (not fireEvent) for user interactions
5. Test: rendering, interaction, accessibility, edge cases, error states
6. Mock API services with MSW or vi.fn()
7. Verify tests are deterministic — no real network calls
8. Run npm test locally before committing

Test Structure

tests/
  web-app.tests/
    components/          # Shared component tests
    features/            # Feature-specific tests
    hooks/               # Custom hook tests
    setup.ts             # Test configuration

Naming Convention

• Test file: {ComponentName}.test.tsx
• Test suite: describe('{ComponentName}', () => { ... })
• Test case: it('should {expected behavior}', ...)

Key Patterns

• Query by role: screen.getByRole('button', { name: 'Submit' })
• Query by label: screen.getByLabelText('Email')
• Assert accessibility: toBeVisible(), toHaveAccessibleName()
• Keyboard: userEvent.tab(), userEvent.keyboard('{Enter}')