Mocking React higher-order components(HOC) with Jest

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.

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.