Mock with jest causes warnings: correct casing, tag is unrecognized and unknown properties

Question

I have AccountSelection, that renders AccountSelectionModal.

I want to do mount in order to test some aspects of the user interaction:

const wrapper = mount(<AccountSelection {...accountSelectionComponentParams} />);

However I would like to mock AccountSelectionModal - I don't need it (and it is also connected component and I don't want to use store in my tests).

When I mock it with jest.mock('../AccountSelectionModal', () => 'AccountSelectionModal');

I start to get plenty of warnings:

Warning: <AccountSelectionModal /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    console.error node_modules\fbjs\lib\warning.js:33

and

Warning: The tag <AccountSelectionModal> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

or

Warning: Unknown event handler property `onHide`. It will be ignored.

or

React does not recognize the `selectedAccountId` prop on a DOM element. If you intentionally want it to appear in the DOM as
a custom attribute, spell it as lowercase `selectedaccountid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

All warnings come from props that are set on AccountSelectionModal.

How can I mock properly AccountSelectionModal

Answer 1

The second argument that you pass to mock is a function that returns whatever you want it to return, and since you want to mock a component, then this function should return a valid react component (now it's returning a String).

This is how you should mock your component.

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

(Notice how the function passed to mock is now returning a function)

You can also return an String but it should be in lowercase (that contains a dash), that way it would be considered as a custom element and not as a react element.

 jest.mock('../AccountSelectionModal', () => 'account-selection-modal');