testing

Testing Standards

Testing Library

• Use React Testing Library
• Use @testing-library/user-event for interactions
• Use Jest as test runner

Testing Principles

Test User Behavior, Not Implementation

// ❌ Bad - testing implementation
expect(component.state.count).toBe(1);

// ✅ Good - testing user-visible behavior
expect(screen.getByText(/count: 1/i)).toBeInTheDocument();

Use Accessible Queries

Priority order:

1. getByRole - Accessibility-first
2. getByLabelText - Forms
3. getByText - User-visible text
4. getByTestId - Last resort

Example Test Pattern:

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('LoginForm', () => {
  it('submits form with valid credentials', async () => {
    const user = userEvent.setup();
    const mockSubmit = jest.fn();
    
    render(<LoginForm onSubmit={mockSubmit} />);
    
    await user.type(screen.getByLabelText(/email/i), '[email protected]');
    await user.type(screen.getByLabelText(/password/i), 'password123');
    await user.click(screen.getByRole('button', { name: /log in/i }));
    
    await waitFor(() => {
      expect(mockSubmit).toHaveBeenCalledWith({
        email: '[email protected]',
        password: 'password123',
      });
    });
  });
});

What to Test

Components:

• Rendering with different props
• User interactions (click, type, etc.)
• Loading and error states
• Accessibility

Hooks:

• Initial state
• All actions/methods
• Edge cases
• Cleanup

Integration:

• Complete user flows
• API interactions (mocked)
• State updates
• Navigation

Mocking

Mock External Dependencies:

jest.mock('next/navigation', () => ({
  useRouter: jest.fn(),
}));

jest.mock('@/lib/api', () => ({
  fetchUser: jest.fn(),
}));

Mock API Calls:

global.fetch = jest.fn(() =>
  Promise.resolve({
    ok: true,
    json: async () => ({ data: 'test' }),
  })
) as jest.Mock;