ThemeProvider 的 Jest Manual Mock

Posted 2023-02-22

【中文标题】ThemeProvider 的 Jest Manual Mock

【英文标题】：Jest Manual Mock for ThemeProvider

【发布时间】：2020-02-25 20:29:01

【问题描述】：

我想测试一个使用 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，但没有成功。

【参考方案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
    );
  );
);

【讨论】：

感谢您跟进您的解决方案，这很有帮助:)

很高兴听到:)

感谢您的解决方案。 :)