How To Mock A React Component In Jest
Tags: jest, javascript, react, testing
Published: 2022-05-15 17:19:27

---
title: How To Mock A React Component In Jest
published: true
date: 2022-05-13 23:29:50 UTC
tags: Jest,JS,ReactJS,Testing
canonical_url: https://robertmarshall.dev/blog/how-to-mock-a-react-component-in-jest/
---

I have previously written a piece on how to mock React components in Jest, and [check to make sure that the component was passed specific props](https://robertmarshall.dev/blog/react-component-props-passed-to-child-jest-unit-test/). I found that sometimes I don’t need to check the props. Many times I only want to make sure the component is on the page.

--------

This article was originally posted (and is more up to date) at https://robertmarshall.dev/blog/how-to-mock-a-react-component-in-jest/

--------

This piece gives examples of how to simply mock a React component in Jest. It will cover default and named exported components.

The understanding is that the component itself will either be tested by a third party so it does not need testing, or has already been tested in a different test file. By mocking the imported component we can reduce the complexity of a test – breaking it down to its simplest form.

## Example

There are two components, `TopLevelComponent` and `Modal`. The `TopLevelComponent` can take a prop of open. When open is set to true the `Modal` is shown. The test does not want to have to mock any of the `Modal` internals. We just want to test if the `Modal` is rendered or not.

```javascript
import React from "react";
import Modal from "./Modal";

const TopLevelComponent = ({ open }) => (
  <>
    <p>Some other content to render...</p>
    {open && <Modal />}
  </>
);

export default TopLevelComponent;
```

## The Complete Test

To mock a React component within Jest you should use the `jest.mock` function. The file that exports the specific component is mocked and replaced with a custom implementation. Since a component is essentially a function, the mock should also return a function. Leading on from the example above, the tests would look like so:

```javascript
import React from "react";
import { render } from "@testing-library/react";
import TopLevelComponent from "./TopLevelComponent";

jest.mock("./Modal", () => () => {
  return <mock-modal data-testid="modal"/>;
});

test("If TopLevelComponent is passed the open prop Modal is rendered", () => {
  const { queryByTestId } = render(<TopLevelComponent open />);
  expect( queryByTestId("modal") ).toBe(true)
});

test("If TopLevelComponent is not passed the open prop Modal is not rendered", () => {
  const { queryByTestId } = render(<TopLevelComponent />);
  expect( queryByTestId("modal") ).toBe(false);
});

```

## But My Component is a Named Export

The above example uses a default exported function. It is the main item to be exported from its file. However, how do we mock the component when it is a named export? i.e – But how do you mock a React component that is the named export of a file?

```javascript
import React from "react";
import { Modal } from "./ManyModals";

const TopLevelComponent = ({ open }) => (
  <>
    <p>Some other content to render...</p>
    {open && <Modal />}
  </>
);

export default TopLevelComponent;
```

There are several things to consider, is it an ES6 module or not? The first example below example is not, and is slightly simpler:

```javascript
jest.mock("./ManyModals", () => ({
  Modal: () => {
    return <mock-modal data-testid="modal"/>;
  },
}));
```

However if you are working with ES6 Modules then you will need to do the following:

```javascript
jest.mock("./ManyModals", () => ({
  __esModule: true,
  Modal: () => {
    return <mock-modal data-testid="modal"/>;
  },
}));
```

This way of checking if the correct props have been set has massively simplified my unit testing. I quite often need to Jest Test that React component has passed props correctly with React Testing Library, and this way of handling them is quick and clean.

## What About Testing the Props?

I have written another piece on that over at: [Check React Component Props are Passed to Child in Jest Unit Test](https://robertmarshall.dev/blog/react-component-props-passed-to-child-jest-unit-test/). That shows how to mock React components with a little more complexity.

 

For more React and Jest hints and tips take a look at the [React Category](https://robertmarshall.dev/blog/category/reactjs/), and [Jest Testing Category](https://robertmarshall.dev/blog/category/jest/)!

Hopefully this article has helped, and if you have any questions you can reach me at: [@robertmars](https://twitter.com/robertmars)