---
title: "Mocking React higher-order components(HOC) with Jest"
description: "Testing a React component wrapped in a higher-order component can stall your whole suite. How to mock the HOC with Jest and get moving again."
canonical_url: "https://www.tarmac.io/resources/mocking-react-higher-order-components-hoc-with-jest/"
last_updated: "2026-10-07"
---

[Resources](https://www.tarmac.io/resources/) / Engineering

# Mocking React higher-order components(HOC) with Jest

Testing a React component wrapped in a higher-order component can stall your whole suite. How to mock the HOC with Jest and get moving again.

Aleksandar Lazarevski · January 5, 2021 Engineering

![src: https://unsplash.com/photos/4hbJ-eymZ1o](https://www.tarmac.io/_astro/img-1.bSgv-xG4_Z1Lh110.webp)

### The Problem

Testing React Screens or Components might come to a short halt in the case the Component is enhanced with an additional set of properties returned from a function known as [**higher-order component**](https://reactjs.org/docs/higher-order-components.html).

Things get trickier when that higher-order component is very complex, relies on services to acquire data or needs additional mocks that will complicate a simple test/snapshot render of a React Component.

### Simple Example

Let’s take the following component as an example:

```
import React from 'react';
import withSomething from './with-something';

const MyComponent = ({ something }) => {
  return <h1>Hello {something}</h1>;
};

export default withSomething(MyComponent);
```

And for the with-something module we have the higher-order component function:

```
import React from 'react';

const HOC = (Component) => (props) => {
```

```
  ... bunch of code, state changes, requests etc ...
```

```
  return <Component {...props} something={aComplexResponse} />;
};

export default HOC;
```

Now when we need to simply render MyComponent for a component snapshot test (or MyComponent can be a child of a rendered component), we might run into an error originating from the higher order component (server call, authentication, environment context etc.)

The easiest way to mock HOC is to create a **mock** directory in the same path of HOC and a mock file with the same name of with-something where we can simplify the code (with a mock data structure prop) :

```
import React from 'react';

const MockedHOC = (Component) => (props) => {
  return <Component {...props} something={'World'} />;
};

export default MockedHOC;
```

Finally our Jest test (in this case using @testing-library/react) will look like this:

```
import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

jest.mock('./with-something');

describe('MyComponent Test', () => {
  test('matches snapshot', () => {
    const { baseElement } = render(<MyComponent />);
    expect(baseElement).toMatchSnapshot();
  });
});
```

The rendered result will include the something prop (our target mock data) to MyComponent using the mocked higher-order component function withSomething

A good implementation would place the jest.mock(‘./with-something’); in a general jestSetup.js file with an absolute path to the HOC module to run together with all jest mocks before all the tests.

### Good Takeaways

The mocked Higher-order Components in React can simplify and speed up the test runs for Component rendering and testing especially in the case where a rendered component has many children and depth of nodes which use additionally enhanced HOCs. The example provided is the simplest form and can usually be bypassed with directly adding the mocked props in the render of MyComponent itself, but in the case where it is a child component resulting of rendering a parent of it, mocking the HOC comes very handy.

Keep reading

## More on Engineering

[

### C4 diagrams your AI agents can actually read

Confluence PNGs are invisible to your coding agents. C4, ERD, and sequence diagrams belong in the repo as Mermaid text, not a picture nobody updates.

August 25, 2026](https://www.tarmac.io/resources/c4-diagrams-for-ai-agents/)[

### A definition of done for humans and agents

Works on my machine is not a definition of done. A field guide to the checks that make done mean done, for human pull requests and AI agents alike.

July 30, 2026](https://www.tarmac.io/resources/definition-of-done-humans-and-agents/)[

### Go, Rust, or Python: picking a backend at scale

When success at scale strains Python, the fix is rarely a rewrite. How to choose Go, Rust, or Zig for the one service that needs it.

July 27, 2026](https://www.tarmac.io/resources/go-rust-python-backend-at-scale/)

## Let’s build something worth taking off.

Tell us what you’re building. We’ll assemble the senior team to ship it.

[Let’s team up→](https://www.tarmac.io/contact/?source=resources-mocking-react-higher-order-components-hoc-with-jest)

## Sitemap

See the full [sitemap](https://www.tarmac.io/sitemap.md) for all pages on tarmac.io.