为何使用MUI React组件作为子组件测试时会报错？如何解决？

核心原因及修复步骤 #

1. 检查MUI组件的导入方式 #

这个错误90%以上是导入MUI组件时搞混了默认导入和命名导入导致的：

• MUI的Button是默认导出，必须写成 import Button from '@mui/material/Button';，要是写成import { Button } from '@mui/material/Button';，你拿到的就是个对象而非组件本身，自然会报错。
• 如果你用的是@mdi/react的Icon组件，同样是默认导入：import Icon from '@mdi/react';；要是用MUI官方的Icon组件，也是默认导入：import Icon from '@mui/material/Icon';。

去Navbar组件顶部核对导入语句，改成正确的格式：

// 正确导入Button
import Button from '@mui/material/Button';
// 正确导入@mdi/react的Icon
import Icon from '@mdi/react';
// 导入需要的图标常量
import { mdiWeb, mdiLogout } from '@mdi/js';

2. 确认MUI相关依赖版本统一 #

如果你的@mui/material、@mdi/react这类依赖版本不匹配，也可能导致组件导出异常。打开package.json检查版本，确保所有MUI生态的包版本一致，比如：

{
  "dependencies": {
    "@mui/material": "^5.14.0",
    "@mdi/react": "^1.6.0",
    "@mdi/font": "^7.2.96"
    // 其他依赖...
  }
}

版本不一致的话，执行npm install或yarn install重新安装统一版本。

3. 给测试代码加上MUI的ThemeProvider #

MUI组件依赖Theme上下文才能正常渲染，测试环境里如果没加ThemeProvider，部分组件可能渲染失败。修改测试代码：

import { ThemeProvider, createTheme } from '@mui/material/styles';

// 创建一个基础主题
const theme = createTheme();

it('Should render all links', () => {
    const { getAllByRole } = render(
      <ThemeProvider theme={theme}>
        <Router>
          <Navbar username="test username" logout={vi.fn()} />
        </Router>
      </ThemeProvider>
    );
    const links = getAllByRole('link');
    expect(links[0]).toHaveTextContent(/ResourcePlanning/i);
    expect(links[1]).toHaveTextContent(/MobileView/i);
  });

4. 检查Icon的图标路径是否正确 #

如果你用的是@mdi/react的Icon，必须确保已经导入对应的图标常量（比如mdiWeb、mdiLogout），不然path属性传的就是无效值，会导致Icon组件渲染异常——这也是常见的踩坑点。

总结 #

先查导入方式，这是最常见的问题；如果没问题，再依次核对依赖版本、测试环境的Theme配置，以及Icon的图标导入是否正确。

内容的提问来源于stack exchange，提问作者ferakp