Recently I have had to test a React Higher Order Component using the fabulous react-testing-library but struggled to find how you can achieve this.

Before I go any further into detail, below is some example code I have done so you can get straight to copy and pasting. For more information see below the code sample.

Show me the code!

---

What is going on?

As you can see from the above code we have an example and very basic High Order Component called `withHOC`. This creates a layout and generic H1 for us and then renders our `WrappedComponent`.

Using the `render` method directly passing this in won’t work. We have to instead do a bit of setup.

On line 22 we create a, what I have called, Mock App with some basic HTML in it.

class MockApp extends React.Component {  
    render () {    
        return (      
            <p>
                Hello from your Mock App
            </p>    
        )  
    }
}

We will use this to be able to wrap our Higher Order Component around it. We do this on line 30.

const MockWithHOC = withHOC(MockApp)

This will now return us a React component we can pass into render.

const { container, getByText } = render(<MockWithHOC />)

And that’s it, we can now start to use this as if it were any other component, plus test that the `WrappedComponent` renders correctly.

expect(getByText(/HOC Example/i)).toBeInTheDocument()  expect(getByText(/Hello from your Mock App/i)).toBeInTheDocument()

---