Introduction

Untested React code is a liability. You refactor one component and something breaks three screens away. Jest is the testing framework that ships with Create React App and integrates tightly with React Testing Library. It handles the test runner, assertions, mocking, and coverage reporting all in one package.

What is Jest?

Jest is an open-source testing framework developed by Facebook for JavaScript applications. It requires almost no configuration to get started, which is rare for testing tools.

Key Features of Jest

  • Zero Configuration: Jest requires minimal setup, allowing you to start testing quickly.
  • Snapshot Testing: Capture the rendered output of React components to detect UI changes.
  • Isolated Tests: Each test runs in its own sandbox to prevent interference between tests.
  • Powerful Mocking: Mock functions, modules, and timers to control code behavior during tests.
  • Code Coverage: Generate detailed reports to understand how much of your code is tested.

Why Use Jest for Testing React Applications?

Jest pairs naturally with React Testing Library, which lets you query and interact with your components the way a user would, rather than digging into implementation details. Tests run in parallel, so even large suites finish quickly. The mocking API is thorough enough to isolate any dependency.

Setting Up Jest in a React Application

Prerequisites

Node.js and npm installed, with basic familiarity with React and JavaScript.

Creating a New React App

Create a new React application using Create React App:

npx create-react-app my-app
cd my-app

Create React App comes with Jest pre-configured, so you can start writing tests immediately.

Existing React Applications

If you have an existing React project without Jest, install it:

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Then add the following to your package.json:

"scripts": {
  "test": "jest"
},
"jest": {
  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}

Writing Your First Test

Creating a React Component

Create a new file src/components/Greeting.js:

import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

Writing a Test for the Component

Create a test file src/components/Greeting.test.js:

import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders greeting message', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i);
  expect(greetingElement).toBeInTheDocument();
});

Running the Test

npm test

Jest finds test files automatically and reports results in the terminal.

Understanding the Test Syntax

The test above follows a simple pattern. Import the component, render it into a virtual DOM via render(), query an element with screen.getByText(), and assert it exists with expect().toBeInTheDocument(). The test() function wraps each case with a description string and a callback.

Testing User Interactions

Example: Button Click Event

Suppose we have a button that increments a counter:

// Counter.js
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

Writing Tests for User Interaction

// Counter.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments count on button click', () => {
  render(<Counter />);
  const buttonElement = screen.getByText(/Click me/i);
  fireEvent.click(buttonElement);
  expect(screen.getByText(/You clicked 1 times/i)).toBeInTheDocument();
});

fireEvent.click() simulates a real click, and then we assert that the displayed count updated. The test would fail if the onClick handler were broken or the state update didn't trigger a re-render.

Snapshot Testing

Snapshot testing records the rendered output of a component and fails if it changes unexpectedly. It's useful for catching unintended UI regressions.

Creating a Snapshot Test

// Greeting.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Greeting from './Greeting';

test('Greeting component matches snapshot', () => {
  const tree = renderer.create(<Greeting name="World" />).toJSON();
  expect(tree).toMatchSnapshot();
});

The first run creates a snapshot file. Every subsequent run compares against it. When you intentionally change the output, update the snapshot with jest --updateSnapshot.

Mocking Functions and Modules

Mocking a Module

Suppose your component uses an API module:

// api.js
export const fetchData = () => {
  // fetch data from an API
};

Mock it in your tests so network calls never actually fire:

jest.mock('./api', () => ({
  fetchData: jest.fn(() => Promise.resolve({ data: 'mock data' })),
}));

Using the Mock in a Test

// DataComponent.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import DataComponent from './DataComponent';
import { fetchData } from './api';

test('displays fetched data', async () => {
  fetchData.mockResolvedValueOnce({ data: 'mock data' });
  render(<DataComponent />);
  await waitFor(() => expect(screen.getByText(/mock data/i)).toBeInTheDocument());
});

Tips for Effective Testing

  • Test your own code, not third-party libraries.
  • Write deterministic tests. Any test that produces different results on different runs will eventually undermine trust in the suite.
  • Test the output the user sees, not internal implementation details. If you refactor internals without changing behavior, no tests should break.
  • Use descriptive test names. "increments count on button click" is more useful than "test 1".

Code Coverage Reports

Jest generates coverage reports that show which lines, branches, and functions your tests exercise.

Enabling Code Coverage

npm test -- --coverage

Review the output to find untested paths, especially error branches that only trigger under specific conditions.

Integrating with Continuous Integration (CI)

Run Jest in your CI pipeline so every pull request includes a test gate.

Example with GitHub Actions

Create a .github/workflows/main.yml file:

name: Node.js CI

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x, 16.x]
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js $
        uses: actions/setup-node@v2
        with:
          node-version: $
      - run: npm install
      - run: npm test -- --coverage
      - uses: actions/upload-artifact@v2
        with:
          name: coverage-report
          path: coverage/

Conclusion

Jest covers everything a React testing workflow needs: a fast parallel test runner, an assertion library, mocking, snapshot diffing, and coverage reports. Start with the interaction tests, those catch the most regressions per line of test code written, then add snapshots for stable UI components. Once tests run automatically in CI, you get the permanent feedback loop that makes refactoring safe.

Additional Resources