Jest Manual Mock for ThemeProvider - reactjs

Question

I want to test a React Component that uses Material-UI`s makeStyles.
My Component:
import React from 'react';
import { useTranslation } from 'react-i18next';
import { DefaultButton } from '../../../../components';
import { makeStyles } from '#material-ui/styles';
const useStyles = makeStyles((theme: any) => ({
root: {},
row: {
marginTop: theme.spacing()
},
spacer: {
flexGrow: 1
},
}));
const UsersToolbar: React.FC<any> = (props) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<div className={classes.root}>
<div className={classes.row}>
<span className={classes.spacer} />
<DefaultButton id="createUserBtn">{t('Create User')}</DefaultButton>
</div>
</div>
);
};
export default UsersToolbar;
My test:
import React from 'react';
import ReactDOM from 'react-dom';
import { createMuiTheme } from '#material-ui/core';
import { ThemeProvider } from '#material-ui/styles';
import UsersToolbar from '.';
describe('<UsersToolbar />', () => {
it('passes smoke test', () => {
const div = document.createElement('div');
ReactDOM.render(
<UsersToolbar />,
div
);
});
});
I was thinking about using jest.mock() and place a manual mock in __mocks__/
How can I do that? I tried to provide a ThemeProvider as proposed on the official Material-UI homepage (https://material-ui.com/guides/testing/) but it did not work out.

Answer 1

I solved this by creating a component named MockTheme which wraps the component that needs to be tested. The result looks like the following:
import React from 'react';
import { createMuiTheme } from '#material-ui/core';
import { ThemeProvider } from '#material-ui/core/styles';
function MockTheme({ children }: any) {
const theme = createMuiTheme({});
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
export default MockTheme;
The modified test now works:
import React from 'react';
import ReactDOM from 'react-dom';
import MockTheme from '../../../../theme/MockTheme';
import UsersToolbar from '.';
describe('<UsersToolbar />', () => {
it('passes smoke test', () => {
const div = document.createElement('div');
ReactDOM.render(
<MockTheme>
<UsersToolbar />
</MockTheme>,
div
);
});
});