Using Jest to bully a React component with props

Question

I have a React component that contains some other components that depend on access to the Redux repository, etc., which cause problems when running the full Enzyme monster. Let's say this structure:

import ComponentToMock from './ComponentToMock'; <ComponentToTest> ...some stuff <ComponentToMock testProp="This throws a warning" /> </ComponentToTest> 

I want to use the Jest .mock() method to mock a component, so this is not a problem for the test.

I know I can mock a direct component with something like:

jest.mock('./ComponentToMock', () => 'ComponentToMock');

However, since this component usually receives props, React is upset by warning of an unknown props (in this case, testProp ) passed to <ComponentToMock /> .

I tried to return the function instead, however you cannot return JSX (from what I could say) in the Jest wizard, because it was raised. This causes an error in this case.

So my question is: how can I

a) receive a ComponentToMock to ignore the details transferred to it, or

b) return a React component that can be used to mock a child component that does not bother me during testing.

Or ... is there a better way?

Answer 1

There is a warning at the bottom of the docs for jest.mock() :

Note. When using babel-jest mock calls will be automatically raised to the top of the code block. Use doMock if you want to explicitly avoid this behavior.

Then you can do as you described: return a function that is the stub of a component that you do not need to test.

 jest.doMock('./ComponentToMock', () => { const ComponentToMock = () => <div />; return ComponentToMock; }); const ComponentToTest = require('./ComponentToTest').default; 

It is useful to name the stub component as it appears in snapshots.

Answer 2

I found out a little more since I asked this question. Here's an alternative (better?) Way to deal with mocking components that need to be passed to the details: using mock file modules.

First, create a file with the same name as the component to fake in the __mocks__ folder in the component folder, for example.

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

Note. It seems that at the time of writing this folder, the folder should be called __mocks__ (you need to create __mocks__ in each folder in which you will have to mock the components. If the underscores upset you, just pretend that they do not exist;))

Further, in this mock file you can write the file as you want, for example

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

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

When Jest encounters .mock() without the second function parameter, it automatically searches for the __mocks__ folder. Nevertheless, despite the fact that the push process is called in the component under test, this does not affect the import of the layout itself, so it can import and compile the React component!

This seems to work well for mocked components that need to pass the details to, and would otherwise give prop warnings if the nulled function were returned (but this is perfectly acceptable for continued use if the component does not receive the details). Hope this helps some people.