Component Testing

ELI5 - The Vibe Check

Component testing is the middle child of the testing pyramid, bigger than a unit test that checks one function in isolation, smaller than an integration test that spins up half your app. You render a real UI component with its real internal logic, but fake out its external dependencies, like the API call or the router, and check that it behaves the way a user would actually expect.

Real Talk

Component testing verifies that an individual UI component renders and behaves correctly in isolation, including its internal state changes and user interactions, typically with external dependencies such as network requests or global stores mocked at the boundary. Tools like Testing Library, Cypress Component Testing, and Storybook's interaction tests operate at this level, sitting between fast, narrow unit tests and slower, broader integration or end-to-end tests in the testing pyramid.

Show Me The Code

import { render, screen, fireEvent } from '@testing-library/react'

test('increments the counter on click', () => {
  render(<Counter />)
  fireEvent.click(screen.getByText('+'))
  expect(screen.getByText('1')).toBeInTheDocument()
})

When You'll Hear This

"Add a component test for the modal, don't just rely on the E2E suite to catch regressions there." / "Component tests run in seconds; the E2E suite for the same flow takes four minutes."