ThemeProvider的手工模拟玩笑

Question

我想测试一个使用材料的反应组件-- makeStyles。

我的组成部分：

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__/中放置一个手动模拟

我怎么能这么做？我试图按照官方材料UI主页( ThemeProvider )的建议提供一个https://material-ui.com/guides/testing/，但它没有成功。

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