TypeError: Cannot read properties of undefined (reading 'up') when using withStyle HOC MUI 5

998 Views Asked by At

Recently migrated my code from MUI v4 to v5, Jest not able to find 'theme' in mystyle.js file, getting this error while running test cases, please find the code snippit below.

NOTE: My parent component is wrapped with themeProvider as this was working fine with MUI v4.

TypeError: Cannot read properties of undefined (reading 'up')

       9 |    
    > 11 |     [theme.breakpoints.up("md")]: {
         |                        ^
      12 |       width: "calc(100% - 400px)",
      13 |     },
      14 |     [theme.breakpoints.up("sm")]: {

Child.js

import React from "react";
import styles from "./styles";
import withStyles from '@mui/styles/withStyles';
import { connect } from "react-redux";

const Child = () => {
   -----my code ---------- 
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(Child));

style.js

const styles = (theme) => ({
 contents: {
   display: "flex",
   justifyContent: "center",
   [theme.breakpoints.up("md")]: {
     width: "calc(100% - 400px)",
   },
   [theme.breakpoints.up("sm")]: {
     width: "calc(100% - 360px)",
   },  }
});
export default styles;

Rendering the component like this in test file.

Child.test.js

   const { baseElement, rerender, getByTestId } = render(
     <Provider store={store}>
       <Child {...props} />
     </Provider>,
     { wrapper: MemoryRouter }
0

There are 0 best solutions below