reactjs - 如何在 Jest 单元测试中修复 "styles$6.makeStyles is not a function"？

Question

我在一个表单组件中工作，在这个表单中，我使用 DateTimePicker 和 MuiPickersUtilsProvider 来显示两个 DateTime 字段。一切都编译并运行良好，但编写单元测试时出现编译错误:

    TypeError: styles$6.makeStyles is not a function

       9 | import Tab from '@material-ui/core/Tab';
      10 | import DateFnsUtils from '@date-io/date-fns';
    > 11 | import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
         | ^
      12 | 
      13 | import {
      14 |     inputProps,

为了修复它，我创建了一个组件并用 withStyles(styles) 包装了 Form 和其他所需的组件，但我仍然遇到了同样的问题。在某些时候，从项目中删除了所有对 @material-ui/pickers 的引用，一切正常。

这就是我试图解决问题的方法，我使用以下代码创建了一个包装器组件 TestWrapperComponent:

import React from 'react';
import {createMuiTheme, MuiThemeProvider} from "@material-ui/core";
import Form from '../Form';

const Theme = createMuiTheme({...});

export default withStyles(styles)(class TestWrapperComponent extends React.Component {

    render() {
        return <StateProvider initialState={{
            displaySuccessMsg: false,
        }} reducer={reducer}>
            <MuiThemeProvider theme={Theme}>
                 <Form/>
            </MuiThemeProvider>
        </StateProvider>
    }
});

Form组件命名为Form

我原以为 withStyles(styles) 会解决这个问题，但我没有成功。我也搜索了整个谷歌，但没有找到任何有意义的东西。

Answer 1

您可以模拟 MUI 组件使用的模块

jest.mock('@material-ui/core/styles', () => ({
  createStyles: () => () => ({}),
  makeStyles: () => () => ({}),
  withStyles: () => () => ({}),
}));