reactjs - TypeError：使用 withStyle HOC MUI 5 时无法读取未定义的属性（读取“向上”）

Question

最近将我的代码从 MUI v4 迁移到 v5，Jest 无法在我的style.js文件中找到“主题”，运行测试用例时出现此错误，请在下面找到代码片段。

注意：我的父组件用 themeProvider 包装，因为它在 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));

样式.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;

在测试文件中像这样渲染组件。

Child.test.js

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