score:16

Accepted answer

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

score: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.

score:5

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

Related Query

More Query from same tag