snippet-pastebin/JEST_TESTS_README.md

Jest Unit Tests for React Components

Overview

This project now includes comprehensive Jest unit tests for all 141 React components in the codebase.

Setup

Jest and React Testing Library have been configured and installed:

npm install  # Installs all dependencies including Jest

Running Tests

Run all unit tests

npm test

Run tests in watch mode

npm test:unit

Run specific test file

npm test -- --testPathPattern=button.test

Run with coverage report

npm test -- --coverage

E2E Tests (Playwright)

npm run test:e2e              # Run all Playwright tests
npm run test:e2e:ui          # Run with UI mode
npm run test:e2e:debug       # Run in debug mode

Test Structure

Configuration Files

• jest.config.ts - Main Jest configuration with TypeScript support
• jest.setup.ts - Setup file for global mocks and utilities
• package.json - Updated with Jest scripts and dependencies

Test Files Location

All test files are colocated with their respective components:

• src/components/ui/*.test.tsx - UI component tests
• src/components/features/**/*.test.tsx - Feature component tests
• src/components/atoms/*.test.tsx - Atom component tests
• src/components/molecules/*.test.tsx - Molecule component tests
• src/components/organisms/*.test.tsx - Organism component tests
• src/app/**/*.test.tsx - App page and layout tests

Test Scripts

Generation scripts are available in /scripts/:

• generate-tests.js - Generates tests for components with exports
• generate-remaining-tests.js - Generates tests for utility components
• generate-app-tests.js - Generates tests for app pages

Dependencies

Testing Libraries

• jest - JavaScript testing framework
• @testing-library/react - React component testing utilities
• @testing-library/jest-dom - Custom Jest matchers for DOM
• @testing-library/user-event - User interaction simulation
• ts-node - TypeScript execution for Jest config
• jest-environment-jsdom - DOM environment for tests

Type Definitions

• @types/jest - TypeScript types for Jest

Test Results

Current test status:

• 141 test files created (1 per component)
• 232+ tests passing
• 398 total tests running

Writing Tests

Basic Component Test

import React from 'react'
import { render, screen } from '@testing-library/react'
import { MyComponent } from './MyComponent'

describe('MyComponent', () => {
  it('renders without crashing', () => {
    render(<MyComponent />)
    expect(screen.getByRole('button')).toBeInTheDocument()
  })

  it('handles click events', async () => {
    const handleClick = jest.fn()
    render(<MyComponent onClick={handleClick} />)
    const button = screen.getByRole('button')
    await userEvent.click(button)
    expect(handleClick).toHaveBeenCalled()
  })
})

Component Test with Props

import React from 'react'
import { render, screen } from '@testing-library/react'
import { Button } from './Button'

describe('Button Component', () => {
  it('applies variant classes', () => {
    render(<Button variant="outlined">Click me</Button>)
    const button = screen.getByRole('button')
    expect(button).toHaveClass('mat-mdc-outlined-button')
  })

  it('renders disabled state', () => {
    render(<Button disabled>Disabled</Button>)
    expect(screen.getByRole('button')).toBeDisabled()
  })
})

Mocked Services

The test setup includes mocks for:

• Next.js Router - useRouter hook
• Next.js Navigation - usePathname, useSearchParams hooks
• window.matchMedia - Media query matching

Coverage

To generate a coverage report:

npm test -- --coverage

Coverage reports will be generated in the coverage/ directory.

Known Issues & Improvements

1. Some auto-generated tests use basic templates and could be enhanced
2. Component-specific tests would benefit from more detailed assertions
3. Hook tests should be added for custom hooks in src/hooks/
4. Integration tests could be added for complex component interactions

Integration with M3 Framework

All tests are compatible with the Material Design 3 (M3) CSS framework:

• Tests verify mat-mdc-* class application
• No dependency on Tailwind CSS
• Compatible with CSS custom properties for theming

CI/CD Integration

Tests can be integrated into CI/CD pipelines:

npm test -- --ci --coverage --maxWorkers=2

Further Reading

• Jest Documentation
• React Testing Library Guide
• Testing Best Practices