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

Question

There has got to be a simple way to do this, but I can't find documented syntax anywhere. I have a React component with a prop that I'd like to mock in Jest like this:

jest.mock('./common/MultiSelect', 'MultiSelect');

That works, except that I end up with a React warning cluttering my test results:

Warning: Unknown prop options on tag. Remove this prop from the element.

The component I'm mocking does have an options prop, and I really don't care how it's rendered, so how can I mock it in such a way it will not throw the warning? I've tried using React.createElement in the mock, and returning an array with element name and props arguments to no end.

The component I want to mock is used like this:

<MultiSelect
options={['option 1', 'option 2']}
/>

Answer 1

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

Answer 2

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} />);