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()
