ThemeProvider 的 Jest 手动模拟

Question

我想测试一个使用 Material-UI 的 makeStyles 的 React 组件。

我的组件：

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;

我的测试：

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

我正在考虑使用jest.mock()并放置一个手动模拟__mocks__/

我怎样才能做到这一点？我尝试提供官方 Material-UI 主页 ( https://material-ui.com/guides/testing/ )上提出的 ThemeProvider，但没有成功。

Answer 1

我通过创建一个名为MockTheme的组件来解决这个问题，该组件包装了需要测试的组件。结果如下所示：

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;

修改后的测试现在有效：

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