Integration Testing

Problem

Individual components work in isolation but fail when combined. Data doesn’t flow correctly between parent and child components, context providers break, or routing transitions cause unexpected state loss. These integration bugs only surface when users follow real workflows.

Solution

Test how multiple units work together by exercising real interactions between components and services. This catches interface mismatches and integration bugs that unit tests miss.

Example

This example demonstrates an integration test that verifies multiple components working together through shared context and user interactions.

test('cart updates when item added', () => {
  // Render multiple components together with shared context
  render(
    <CartProvider>
      <ProductList />
      <Cart />
    </CartProvider>
  );

  // Simulate user clicking add to cart in ProductList
  fireEvent.click(screen.getByText('Add to Cart'));

  // Verify Cart component reflects the change
  expect(screen.getByText('1 item')).toBeInTheDocument();
});

Benefits

• Catches bugs that occur when components interact with each other.
• Tests real user workflows that span multiple components and services.
• Provides confidence that the system works as a cohesive whole.
• Finds interface mismatches that unit tests miss by testing in isolation.

Tradeoffs

• Slower than unit tests since they involve more components and setup.
• Can be brittle when tests depend on complex component hierarchies.
• Harder to debug when failures could be in any of the integrated parts.
• May duplicate coverage with end-to-end tests, creating maintenance burden.