使用jest-enzyme mount测试Material-UI包裹的React组件失败

我之前也碰到过这个问题——旧版Material-UI的组件在ThemeProvider下用mount测试时，经常只显示组件标签字符串，拿不到真实DOM结构。核心原因是旧版Material-UI依赖主题上下文（context），如果测试时没有正确注入主题，组件不会完整渲染。下面是具体的解决步骤：

1. 确认依赖适配 #

首先确保你的enzyme适配器和React版本匹配（旧版Material-UI通常对应React 15或16早期）：

# 安装对应适配器，比如React 15用这个
npm install --save-dev enzyme enzyme-adapter-react-15 react-test-renderer

2. 全局配置测试环境（可选但推荐） #

在项目的测试入口文件（比如src/setupTests.js）里配置enzyme和Material-UI主题，避免每个测试文件重复写：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import { getMuiTheme, MuiThemeProvider } from 'material-ui/styles';
import React from 'react';
import { mount } from 'enzyme';

Enzyme.configure({ adapter: new Adapter() });

// 封装一个带主题的mount工具函数
global.mountWithTheme = (component) => {
  const defaultTheme = getMuiTheme();
  return mount(<MuiThemeProvider muiTheme={defaultTheme}>{component}</MuiThemeProvider>);
};

3. 编写测试代码 #

现在测试时用封装好的mountWithTheme（或者直接手动包裹），就能正确渲染组件内部结构了：

import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('渲染内部HTML结构', () => {
    // 用带主题的mount方法
    const wrapper = mountWithTheme(<MyComponent />);
    
    // 现在可以正常访问内部DOM元素了
    console.log(wrapper.html()); // 输出完整的HTML结构
    
    // 示例断言：检查内部按钮是否存在
    expect(wrapper.find('button.my-action-btn').exists()).toBe(true);
  });
});

关键注意点 #

• 旧版Material-UI的主题组件是MuiThemeProvider（不是v1的ThemeProvider），导入路径是material-ui/styles，别搞错了。
• 必须传入初始化的主题实例（getMuiTheme()返回的对象），否则组件无法获取主题上下文，会以“未渲染”的状态显示成<MyComponent/>字符串。
• 如果你的组件有自定义主题，只需要在getMuiTheme()里传入自定义配置即可，比如getMuiTheme({ palette: { primaryColor: '#ff0000' } })。

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