🧪 Testing Complete Guide

Unit Testing

Tests individual functions/components in complete isolation. No external dependencies, no API calls, no database. Fast and cheap to run.

// Testing a pure utility function
function add(a, b) {
  return a + b;
}

test('adds two positive numbers', () => {
  expect(add(1, 2)).toBe(3);
});

test('handles negative numbers', () => {
  expect(add(-1, 1)).toBe(0);
});

test('handles decimals', () => {
  expect(add(0.1, 0.2)).toBeCloseTo(0.3);
});

// Testing a React component in isolation
test('Button renders with correct text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByRole('button')).toHaveTextContent('Click me');
});

test('Button calls onClick when clicked', async () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click</Button>);
  
  await userEvent.click(screen.getByRole('button'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

test('Button is disabled when loading', () => {
  render(<Button loading>Submit</Button>);
  expect(screen.getByRole('button')).toBeDisabled();
});

Integration Testing

Tests how multiple components work together. Includes API calls (mocked), state management, and component interactions. Gives more confidence than unit tests.

// Testing component with API call and state
test('displays user data after fetch', async () => {
  // Mock the API response
  server.use(
    rest.get('/api/user/1', (req, res, ctx) => {
      return res(ctx.json({ name: 'John Doe', email: 'john@test.com' }));
    })
  );
  
  render(<UserProfile userId="1" />);
  
  // Initially shows loading
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  
  // Wait for data to load
  await screen.findByText('John Doe');
  expect(screen.getByText('john@test.com')).toBeInTheDocument();
  expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
});

// Testing form submission with validation
test('shows error on invalid email', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);
  
  await user.type(screen.getByLabelText('Email'), 'invalid-email');
  await user.click(screen.getByRole('button', { name: 'Submit' }));
  
  expect(screen.getByText('Please enter a valid email')).toBeInTheDocument();
});

E2E Testing

Tests complete user flows in a real browser. Real API calls, real database, real everything. Slowest but highest confidence.

// Playwright - Complete checkout flow
test('user can complete checkout', async ({ page }) => {
  // Login
  await page.goto('/login');
  await page.fill('[name="email"]', 'user@test.com');
  await page.fill('[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  
  // Navigate to products
  await page.goto('/products');
  await page.click('[data-testid="product-1"] button');
  
  // Go to cart and checkout
  await page.click('[data-testid="cart-icon"]');
  await page.click('text=Proceed to Checkout');
  
  // Fill payment details
  await page.fill('[name="cardNumber"]', '4242424242424242');
  await page.click('text=Place Order');
  
  // Verify success
  await expect(page.locator('h1')).toHaveText('Order Confirmed!');
});

Stub

Returns fake data without tracking calls. You don't care HOW it was called, just need it to return something.

// Simple stub - just returns fake value
jest.fn().mockReturnValue('fake data');

// Stubbing an entire module
jest.mock('./api', () => ({
  getUser: () => ({ name: 'John', age: 30 }),
  getPosts: () => [{ id: 1, title: 'Hello' }]
}));

// Using in a test - you only care about rendered output
test('shows user name', () => {
  render(<UserCard />);
  // Don't care HOW getUser was called, just that data renders
  expect(screen.getByText('John')).toBeInTheDocument();
});

✅ Use when: Need fake API response, testing component output, don't care about call details

Mock

Replace AND verify how it was called. Used when you need to assert on the interaction itself.

// Testing callback props
test('calls onSubmit with form data', async () => {
  const mockSubmit = jest.fn();
  const user = userEvent.setup();
  
  render(<ContactForm onSubmit={mockSubmit} />);
  
  await user.type(screen.getByLabelText('Name'), 'John Doe');
  await user.type(screen.getByLabelText('Email'), 'john@test.com');
  await user.click(screen.getByRole('button', { name: 'Submit' }));
  
  // Assert it was called
  expect(mockSubmit).toHaveBeenCalledTimes(1);
  
  // Assert it was called with correct data
  expect(mockSubmit).toHaveBeenCalledWith({
    name: 'John Doe',
    email: 'john@test.com'
  });
});

// Testing that delete was NOT called when cancelled
test('does not delete when cancelled', async () => {
  const mockDelete = jest.fn();
  render(<DeleteButton onDelete={mockDelete} />);
  
  await userEvent.click(screen.getByText('Delete'));
  await userEvent.click(screen.getByText('Cancel')); // Cancel dialog
  
  expect(mockDelete).not.toHaveBeenCalled();
});

✅ Use when: Testing callbacks (onClick, onSubmit), verifying function arguments, counting call times

Spy

Watch the real function while it still executes. Original behavior is preserved, you just observe it.

// Spy on console.log - still actually logs!
test('logs error message', () => {
  const consoleSpy = jest.spyOn(console, 'log');
  
  logError('Something went wrong');
  
  // Original console.log still ran (message appears in console)
  expect(consoleSpy).toHaveBeenCalledWith('Error: Something went wrong');
  
  consoleSpy.mockRestore(); // Always cleanup!
});

// Spy on analytics - verify tracking without breaking it
test('tracks purchase event', async () => {
  const trackSpy = jest.spyOn(analytics, 'track');
  
  render(<CheckoutButton productId="123" />);
  await userEvent.click(screen.getByText('Buy Now'));
  
  // Analytics.track() still ran - data still sent to analytics service
  expect(trackSpy).toHaveBeenCalledWith('purchase_clicked', {
    productId: '123'
  });
  
  trackSpy.mockRestore();
});

// Spy on Date - useful for time-dependent tests
test('formats date correctly', () => {
  const dateSpy = jest.spyOn(Date, 'now').mockReturnValue(
    new Date('2024-01-15').getTime()
  );
  
  expect(getFormattedDate()).toBe('January 15, 2024');
  
  dateSpy.mockRestore();
});

✅ Use when: Testing 3rd party integrations, observing side effects, need to restore original behavior