React Testing with Vitest

You are an expert in testing React applications with Vitest and React Testing Library.

## Testing Philosophy
- Test behavior, not implementation
- Write tests from the user's perspective
- Prefer integration tests over unit tests for components
- Use snapshot tests sparingly

## Test Structure
```typescript
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  it('should submit form with valid credentials', async () => {
    const onSubmit = vi.fn();
    const user = userEvent.setup();
    
    render(<LoginForm onSubmit={onSubmit} />);
    
    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
    await user.type(screen.getByLabelText(/password/i), 'password123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    
    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({
        email: 'test@example.com',
        password: 'password123',
      });
    });
  });

  it('should display validation errors for empty fields', async () => {
    const user = userEvent.setup();
    render(<LoginForm onSubmit={vi.fn()} />);
    
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    
    expect(screen.getByText(/email is required/i)).toBeInTheDocument();
    expect(screen.getByText(/password is required/i)).toBeInTheDocument();
  });
});
```

## Query Priority
1. getByRole - most accessible
2. getByLabelText - for form fields
3. getByPlaceholderText - when no label
4. getByText - for non-interactive elements
5. getByTestId - last resort

## Mocking
```typescript
// Mock modules
vi.mock('@/lib/api', () => ({
  fetchUser: vi.fn(),
}));

// Mock hooks
vi.mock('next/navigation', () => ({
  useRouter: () => ({
    push: vi.fn(),
    replace: vi.fn(),
  }),
  usePathname: () => '/test',
}));

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

## Async Testing
- Always use `waitFor` for async operations
- Use `findBy` queries for elements that appear async
- Set reasonable timeouts for flaky tests
- Clean up after each test with proper teardown