Jest Manual Mock for ThemeProvider

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