Using Jest to mock a React component with props

Question

I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let\'s say a st

Answer 1

I've learned a little more since I asked this question. Here's an alternative (better?) way of dealing with mocking components that need to be passed props: using module mock files.

First create a file with the same name as the component to mock in a __mocks__ folder under the component's folder e.g.

.
|- /ComponentToMock.js
└- /__mocks__/ComponentToMock.js <-- create this folder/file!

Note: It seems as of the time of writing, the folder must be called __mocks__ (you will need to create __mocks__ in each folder you need to mock components for. If the underscores upset you, just pretend they aren't there ;) )

Next, in this mock file, you can write the file as you wish, e.g.

// This code would live in ./__mocks__/ComponentToMock.js
import React from 'react';
const ComponentToMock = ({ testProp }) => 
A mock with '{testProp}' passed!
;
export default ComponentToMock;

Then in the test file, change the Jest mock statement to: jest.mock('./ComponentToMock');

When Jest encounters a .mock() without the second function parameter, it automatically looks for a __mocks__ folder. However, even though the mock statement gets hoisted in the component being tested, this doesn't affect the imports of the mock itself - hence why it's able to import and compile a React component!

This seems to work well for mocked components that need to be passed props, and would otherwise produce prop warnings if a nulled function was returned (but which is perfectly acceptable to continue using if the component does not receive props). I hope this helps some people out there.