Testing Next.js Applications

// __tests__/utils.test.ts
import { formatDate, calculateTotal } from '@/lib/utils';

describe('formatDate', () => {
  it('formats date correctly', () => {
    expect(formatDate(new Date('2024-01-15'))).toBe('Jan 15, 2024');
  });
});

// __tests__/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Button from '@/components/Button';

describe('Button', () => {
  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

// Server Component test
import { render } from '@testing-library/react';
import UserProfile from '@/app/user/[id]/page';

// Mock the async data
jest.mock('@/lib/db', () => ({
  getUser: jest.fn().mockResolvedValue({ name: 'John' }),
}));

describe('UserProfile', () => {
  it('renders user name', async () => {
    const Component = await UserProfile({ params: { id: '1' } });
    const { getByText } = render(Component);
    expect(getByText('John')).toBeInTheDocument();
  });
});

// e2e/checkout.spec.ts
import { test, expect } from '@playwright/test';

test('complete checkout flow', async ({ page }) => {
  await page.goto('/products');
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout"]');

  await page.fill('[name="email"]', 'test@example.com');
  await page.click('[type="submit"]');

  await expect(page).toHaveURL('/order-confirmation');
});

// __tests__/api/users.test.ts
import { GET, POST } from '@/app/api/users/route';

describe('/api/users', () => {
  it('GET returns users', async () => {
    const response = await GET();
    const data = await response.json();
    expect(data.users).toHaveLength(2);
  });
});