The Testing Pyramid

What is the Testing Pyramid?

The Testing Pyramid is a framework that helps you create a balanced and efficient test suite. It suggests having many fast, cheap unit tests at the base, fewer integration tests in the middle, and even fewer slow, expensive end-to-end tests at the top.

The Traditional Testing Pyramid

Why This Shape?

// Speed comparison
Unit Test Suite:     0.5 seconds  ✓
Integration Tests:   15 seconds   ⚡
E2E Test Suite:      5 minutes    🐌

Developer runs tests: Every few minutes
CI/CD pipeline:       Every commit

Fast tests = More testing = Better code

Testing Pyramid in Practice

// Example: E-commerce Shopping Cart Feature

// ✅ UNIT TESTS (Many) - Test pure functions
// cart.js
export function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

export function applyDiscount(total, discountPercent) {
  return total * (1 - discountPercent / 100);
}

// cart.test.js
describe('Cart calculations', () => {
  test('calculates total correctly', () => {
    const items = [
      { price: 10, quantity: 2 },
      { price: 5, quantity: 3 }
    ];
    expect(calculateTotal(items)).toBe(35);
  });

  test('applies discount correctly', () => {
    expect(applyDiscount(100, 10)).toBe(90);
    expect(applyDiscount(100, 0)).toBe(100);
  });

  test('handles empty cart', () => {
    expect(calculateTotal([])).toBe(0);
  });
});

// ⚡ INTEGRATION TESTS (Moderate) - Test components working together
// CartComponent.test.jsx
describe('Cart Component Integration', () => {
  test('updates total when items are added', () => {
    render();
    
    // Add items
    fireEvent.click(screen.getByText('Add Item 1'));
    fireEvent.click(screen.getByText('Add Item 2'));
    
    // Verify total is updated
    expect(screen.getByText(/Total: $35/)).toBeInTheDocument();
  });

  test('applies discount code', async () => {
    render();
    
    // Enter discount code
    fireEvent.change(screen.getByPlaceholderText('Discount code'), {
      target: { value: 'SAVE10' }
    });
    fireEvent.click(screen.getByText('Apply'));
    
    // Verify discount is applied
    await waitFor(() => {
      expect(screen.getByText(/Discount: 10%/)).toBeInTheDocument();
    });
  });
});

// 🌐 E2E TESTS (Few) - Test critical user journeys
// checkout.e2e.test.js
describe('Checkout Flow E2E', () => {
  test('user can complete purchase', async () => {
    // Navigate to store
    await page.goto('http://localhost:3000');
    
    // Add items to cart
    await page.click('[data-testid="add-product-1"]');
    await page.click('[data-testid="add-product-2"]');
    
    // Go to checkout
    await page.click('[data-testid="cart-button"]');
    await page.click('[data-testid="checkout-button"]');
    
    // Fill shipping info
    await page.fill('[name="email"]', 'user@example.com');
    await page.fill('[name="address"]', '123 Main St');
    
    // Submit payment
    await page.fill('[name="cardNumber"]', '4242424242424242');
    await page.click('[data-testid="submit-payment"]');
    
    // Verify success
    await expect(page.locator('text=Order confirmed')).toBeVisible();
  });
});

The Testing Trophy (Modern Alternative)

What to Test at Each Level

Anti-Pattern: The Ice Cream Cone

Building Your Test Strategy

// Step-by-step approach to testing a new feature

// 1. Start with unit tests for business logic
describe('OrderProcessor', () => {
  test('calculates order total with tax', () => {
    const processor = new OrderProcessor({ taxRate: 0.08 });
    const order = { subtotal: 100 };
    expect(processor.calculateTotal(order)).toBe(108);
  });
});

// 2. Add integration tests for component behavior
describe('CheckoutForm', () => {
  test('submits order when form is valid', async () => {
    const onSubmit = jest.fn();
    render();
    
    // Fill form...
    fireEvent.click(screen.getByText('Place Order'));
    
    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
        email: 'test@example.com',
        total: 108
      }));
    });
  });
});

// 3. Add ONE E2E test for the critical path
test('user can complete checkout', async () => {
  // Full user journey from cart to confirmation
  await page.goto('/cart');
  await page.click('text=Checkout');
  // ... fill all forms ...
  await page.click('text=Place Order');
  await expect(page.locator('text=Thank you')).toBeVisible();
});