React Testing with Jest — Complete Guide

In this tutorial, you will learn about React Testing with Jest. We cover key concepts, practical examples, and best practices to help you master this topic.

Jest is a JavaScript testing framework that works seamlessly with React, providing assertions, mocking, Code Coverage, and a built-in test runner for component and unit tests.

What You'll Learn

• How to set up Jest for React
• How to write component tests
• How to test hooks
• How to mock API calls
• How to use Snapshot Testing

Why It Matters

Testing ensures your components work correctly as the codebase grows. Jest provides a complete testing solution with zero configuration for Create React App projects.

import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("renders initial count", () => {
  render(<Counter initialCount={0} />);
  expect(screen.getByText("Count: 0")).toBeInTheDocument();
});

test("increments on button click", () => {
  render(<Counter initialCount={0} />);
  fireEvent.click(screen.getByText("+"));
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

Expected output: Tests pass, verifying the Counter component renders correctly and increments on click.