How to fix "styles$6.makeStyles is not a function" in jest unit tests?

Question

I am working in a form component, inside this form I am using DateTimePicker and MuiPickersUtilsProvider in oder to show two DateTime fields. Everything compiles and run fine, but writing the unit test I am getting a compilation error:

    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,

In order to fix it, I create a component and wrap the Form and other components needed with withStyles(styles) but still I got the same issue. At some point a removed from the project all the references to @material-ui/pickers and everything works fine.

This is how I tried to fix the problem, I created a wrapper component TestWrapperComponent with the following code:

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

The Form component is named Form

I was expecting that withStyles(styles) would fix the issue, but I haven't had success. I also search all over google, and have not find anything meaningful.

Answer 1

You can mock modules used by MUI components

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