How to Mock a React Component in Jest

Recently, I was working on a React project where I needed to test a dashboard component.
The dashboard relied on several child components, and I wanted to isolate the parent logic without worrying about the child implementations.

The issue is… when you render the full component tree in tests, it often makes debugging harder. So, mocking React components in Jest becomes a lifesaver.

In this tutorial, I’ll show you different ways to mock React components in Jest. I’ll also share complete code examples so you can try them in your own projects.

Method 1 – Mocking a Component with jest.mock

The simplest way is to use jest.mock directly. This replaces the child component with a dummy implementation.

// Dashboard.js
import React from "react";
import UserCard from "./UserCard";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <UserCard userId={42} />
    </div>
  );
}

// Dashboard.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import Dashboard from "./Dashboard";

// Mock UserCard component
jest.mock("./UserCard", () => () => <div>Mocked UserCard</div>);

test("renders Dashboard with mocked UserCard", () => {
  render(<Dashboard />);
  expect(screen.getByText("Dashboard")).toBeInTheDocument();
  expect(screen.getByText("Mocked UserCard")).toBeInTheDocument();
});

You can see the output in the screenshot below.

I use jest.mock to replace UserCard with a simple <div>. This makes sure my test focuses only on the Dashboard logic.

Method 2 – Mocking a Component with Props

Sometimes, you need the mocked component to accept props. This is useful if the parent passes data that you want to verify.

// Profile.js
import React from "react";
import Address from "./Address";

export default function Profile() {
  return (
    <div>
      <h2>User Profile</h2>
      <Address city="New York" />
    </div>
  );
}

// Profile.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import Profile from "./Profile";

// Mock Address component with props
jest.mock("./Address", () => (props) => (
  <div>Mocked Address: {props.city}</div>
));

test("renders Profile with mocked Address", () => {
  render(<Profile />);
  expect(screen.getByText("User Profile")).toBeInTheDocument();
  expect(screen.getByText("Mocked Address: New York")).toBeInTheDocument();
});

You can see the output in the screenshot below.

Here, the mocked component prints the city prop. This makes my test more realistic while still keeping it isolated.

Method 3 – Use __mocks__ Directory

For larger projects, I prefer using a __mocks__ folder. This keeps the mocks reusable and cleaner.

// components/Map.js
import React from "react";

export default function Map({ location }) {
  return <div>Showing map of {location}</div>;
}

// __mocks__/Map.js
import React from "react";

export default function MockedMap({ location }) {
  return <div>Mocked Map for {location}</div>;
}

// Travel.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import Travel from "./Travel";

// Tell Jest to use the mock
jest.mock("./Map");

test("renders Travel with mocked Map", () => {
  render(<Travel />);
  expect(screen.getByText("Mocked Map for USA")).toBeInTheDocument();
});

You can see the output in the screenshot below.

With __mocks__, Jest automatically uses the mock when you call jest.mock(“./Map”). This is great when you have multiple tests needing the same mock.

Method 4 – Mocking with jest.fn and Custom Implementation

Sometimes, I want full control over the mock behavior. In that case, I use jest.fn with a custom implementation.

// Weather.js
import React from "react";
import Forecast from "./Forecast";

export default function Weather() {
  return (
    <div>
      <h2>Weather App</h2>
      <Forecast city="Chicago" />
    </div>
  );
}

// Weather.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import Weather from "./Weather";

// Mock Forecast with jest.fn
const MockForecast = jest.fn((props) => (
  <div>Forecast for {props.city}</div>
));

jest.mock("./Forecast", () => (props) => MockForecast(props));

test("renders Weather with mocked Forecast", () => {
  render(<Weather />);
  expect(screen.getByText("Weather App")).toBeInTheDocument();
  expect(screen.getByText("Forecast for Chicago")).toBeInTheDocument();
  expect(MockForecast).toHaveBeenCalledWith({ city: "Chicago" }, {});
});

Here, I track calls to the mocked component with jest.fn. This allows me to assert not only rendering but also prop usage.

Conclusion

While there is no single “best” way to mock React components in Jest, I usually start with jest.mock for quick tests.
If I need more control or reusability, I switch to __mocks__ or jest.fn.

Both approaches work great – the key is to choose the one that keeps your tests clean and focused.

You may also read:

• Build a React Modal Component Example
• React Class Component vs Functional Component
• Higher Order Components in React
• Can’t Perform a React State Update on an Unmounted Component

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/