How do you mock a react component with Jest that has props?

After playing around with it, I realized I had the syntax wrong for my returned component. Mocking it like this works:

jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => () => <div />);

Mocking it like this doesn't (this is what I was doing):

jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => <div />);

The warning even told me the issue, but I misinterpreted it:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Termination.

You're mocking the component with a string as the second argument. That's unusual, as the jest.mock function expects a function as a second argument. The string may work for your test (depending on how it is rendered) but it's undefined behavior in Jest's documentation and is probably what is causing your problem. Instead pass a function that returns a component. Here's one that passes a simple functional component that just passes the name back:

jest.mock('./common/MultiSelect', () => () =><span>MultiSelect</span>);

I find the following mock pattern useful in cases where you want to see the component name and props being provided in your Jest snapshots:

jest.mock('./common/MultiSelect', () => (props) => <mock-MultiSelect {...props} />);