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']}
/>

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

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

Solution 3

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.

Comments

[Ravindra Ranwala]

show me your component being tested?

[EMC]

Using a string to mock is supported if you just need something that renders sensibly in your snapshot, but you're right, it's probably too simplistic for this case. Do you know how to add props to the example you posted above? That's what I'm really looking for.

[EMC]

This syntax is correct, but some details on what I was doing wrong in my answer below.

[mojave]

I had to put the jest.mock()... at the top of my test file, with the imports. Spent a little time trying to put it in my jest describe(), but didn't work until I moved it up with the imports (or at least outside of all the describes.)

[Watchmaker]

What would you assert in your expect when you mock a React component?