Jest Basics | Testing React Applications Tutorial

Jest is a popular JavaScript testing framework developed by Facebook, and it’s particularly well-suited for testing React applications. It’s known for its simplicity, speed, and built-in features like mocking and snapshot testing. This guide covers the fundamentals of using Jest with React.

Why Jest?

Zero Configuration:Often works out-of-the-box with React projects created using Create React App.
Fast Performance:Runs tests in parallel and caches results for quicker feedback.
Snapshot Testing:Excellent for detecting unintended UI changes.
Mocking:Easily mock dependencies to isolate components during testing.
Built-in Assertions:Provides a rich set of assertion methods for verifying expected outcomes.
Excellent Documentation:Comprehensive and easy-to-understand documentation.

Setting up Jest

If you used Create React App, Jest is already configured! You can verify by running:


npm test
# or
yarn test

This will execute any tests you've written.

If you're not using Create React App, you'll need to install Jest and its dependencies:


npm install --save-dev jest @babel/preset-env @babel/preset-react
# or
yarn add --dev jest @babel/preset-env @babel/preset-react

You'll also need to configure Babel to transpile your code for Jest. Create ababel.config.jsfile (or modify your existing one) with:


module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
};

Finally, add atestscript to yourpackage.json:


{
  "scripts": {
    "test": "jest"
  }
}

Writing Your First Test

Let's say you have a simple React component called Greeting.js:

// Greeting.js
import React from 'react';

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

export default Greeting;

To test this component, create a corresponding test file, typically named Greeting.test.js (or Greeting.spec.js) in the same directory:

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

test('renders a greeting message with the provided name', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i); // Case-insensitive search
  expect(greetingElement).toBeInTheDocument();
});

Explanation:

import React from 'react';: Imports the React library.
import { render, screen } from '@testing-library/react';: Imports functions from @testing-library/react. This library is highly recommended for testing React components as it encourages testing based on user interactions rather than implementation details.
import Greeting from './Greeting';: Imports the component you want to test.
test('renders a greeting message with the provided name', () => { ... });: Defines a test case. The first argument is a descriptive string, and the second is a function containing the test logic.
render(<Greeting name="World" />);: Renders the Greeting component with the name prop set to "World".
const greetingElement = screen.getByText(/Hello, World!/i);: Uses @testing-library/react's screen.getByText to find an element containing the text "Hello, World!". The /i flag makes the search case-insensitive.
expect(greetingElement).toBeInTheDocument();: Uses Jest's expect function to assert that the greetingElement is present in the rendered document. toBeInTheDocument() is a matcher provided by @testing-library/react.

Common Jest Matchers

Jest provides a variety of matchers for making assertions. Here are some commonly used ones:

toBe(value): Strict equality (using ===).
toEqual(value): Deep equality (checks if objects have the same properties and values).
toBeNull(): Checks if a value is null.
toBeUndefined(): Checks if a value is undefined.
toBeDefined(): Checks if a value is defined.
toBeTruthy(): Checks if a value is truthy.
toBeFalsy(): Checks if a value is falsy.
toBeGreaterThan(number): Checks if a value is greater than a number.
toBeLessThan(number): Checks if a value is less than a number.
toContain(item): Checks if an array contains an item.
toMatch(regexp): Checks if a string matches a regular expression.
toBeInTheDocument(): (From @testing-library/react) Checks if an element is present in the DOM.

Asynchronous Testing

When testing asynchronous code (e.g., fetching data), you need to handle the asynchronous nature of the operations. Jest provides several ways to do this:

async/await: The preferred method.

test('fetches data successfully', async () => {
  const data = await fetchData();
  expect(data).toEqual({ name: 'Test Data' });
});

Promises and .resolves / .rejects:

test('fetches data successfully (using Promises)', () => {
  return fetchData().then(data => {
    expect(data).toEqual({ name: 'Test Data' });
  });
});

test('fetches data and rejects', () => {
  expect(fetchData()).rejects.toThrow('Error fetching data');
});

Snapshot Testing

Snapshot testing captures a snapshot of a component's rendered output and compares it to previous snapshots. If the output changes, the test fails, alerting you to potential UI regressions.

test('renders correctly', () => {
  const tree = render(<Greeting name="Snapshot" />);
  expect(tree).toMatchSnapshot();
});

The first time you run this test, Jest will create a snapshot file (e.g., Greeting.test-snapshots.js). Subsequent runs will compare the current output to the snapshot. If there are differences, Jest will show you a visual diff.

Mocking

Mocking allows you to isolate components by replacing their dependencies with controlled substitutes. This is useful for testing components without relying on external services or complex logic.

// myModule.js
export function fetchData() {
  // ... some complex logic
  return Promise.resolve({ data: 'some data' });
}

// MyComponent.test.js
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
import * as myModule from './myModule';

jest.mock('./myModule'); // Mock the entire module

test('renders data from fetchData', () => {
  myModule.fetchData.mockResolvedValue({ data: 'mocked data' }); // Mock the return value

  render(<MyComponent />);
  const dataElement = screen.getByText(/mocked data/i);
  expect(dataElement).toBeInTheDocument();
});

Key takeaways:

jest.mock('./myModule'); mocks the entire module.
myModule.fetchData.mockResolvedValue(...) mocks the return value of the fetchData function.
You can also use mockImplementation to provide a custom function implementation for the mock.

Further Resources

Jest Documentation: https://jestjs.io/
@testing-library/react Documentation: https://testing-library.com/docs/react
Create React App Testing Guide: https://create-react-app.dev/docs/testing/