Jest with React

Setting Up Jest for React

A React project needs the jsdom test environment (to simulate the DOM), Babel presets for JSX (@babel/preset-react), and typically React Testing Library for rendering components in tests in a user-centric way. Create React App and most modern React starters configure most of this for you automatically.

Component tests generally render a component into a simulated DOM, interact with it the way a user would (clicking, typing), and assert on what's visible afterward — rather than inspecting internal component state directly.

// Button.jsx
export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

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

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(<Button label="Save" onClick={handleClick} />);

  fireEvent.click(screen.getByText('Save'));

  expect(handleClick).toHaveBeenCalledTimes(1);
});

The test finds the button by its visible text and clicks it, exactly as a real user would.

Babel Configuration for JSX

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
};

• @babel/preset-react compiles JSX syntax into regular JavaScript function calls Jest can run.
• testEnvironment: 'jsdom' is required (and must be installed separately since Jest 28).
• React Testing Library (@testing-library/react) provides render(), screen, and query utilities.
• @testing-library/jest-dom adds DOM-specific matchers like .toBeVisible() and .toHaveTextContent().

Jest + React Setup Cheat Sheet

The essential packages and config for testing React with Jest.

React Test Renderer vs. React Testing Library

React's own react-test-renderer package renders a component to a plain JavaScript object tree (not a real DOM), which is useful for snapshotting a component's structure. React Testing Library instead renders into jsdom's real (simulated) DOM and queries it the way a user or accessibility tool would — by visible text, roles, and labels.

React Testing Library is the more widely recommended approach today, because it tests components closer to how users actually experience them, rather than their internal implementation details.

Testing Behavior, Not Implementation Details

A common mistake when testing React components is reaching into internal state or calling instance methods directly. Testing Library intentionally makes this difficult, nudging you toward asserting on what's rendered and how it responds to interaction — which stays valid even if the component's internals are refactored.

Common Mistakes

• Testing a component's internal state directly instead of its rendered output and behavior.
• Forgetting testEnvironment: 'jsdom' and getting document is not defined errors.
• Not installing @testing-library/jest-dom, missing out on much clearer matcher failure messages.
• Over-relying on snapshot testing for components instead of behavior-focused interaction tests.

Key Takeaways

• Testing React with Jest requires the jsdom environment and JSX-aware Babel presets.
• React Testing Library renders into a real simulated DOM and queries it like a user would.
• react-test-renderer is better suited for structural snapshots than behavior testing.
• Favor testing rendered output and interactions over internal component implementation details.