如何使用Enzyme在测试中为高阶组件传递React Context

嘿，我来帮你搞定这个测试Material-UI withStyles组件的问题！当测试用withStyles装饰的组件时，确实得让组件能正确访问到MUI的主题上下文，不然样式不仅不生效，搞不好还会报错。你当前的实现思路是对的，但手动获取MuiThemeProvider的childContext有点绕，而且在不同版本的Material-UI里可能不稳定。我给你整理了更简洁可靠的实现方式：

优化后的测试工具函数 #

import React from 'react';
import { mount, shallow } from 'enzyme';
import { createMuiTheme, MuiThemeProvider } from 'material-ui/styles'; // 如果你用的是MUI v5，换成@mui/material/styles
import globalTheme from 'client/theme/base'; // 修正了你代码里的笔误globalThem→globalTheme

// 初始化项目全局主题
const theme = createMuiTheme(globalTheme);

// 封装shallow渲染工具，自动注入主题上下文
export const shallowWithStyles = (componentNode) => {
  return shallow(
    <MuiThemeProvider theme={theme}>
      {componentNode}
    </MuiThemeProvider>
  ).dive(); // 用dive()穿透ThemeProvider，获取你要测试的目标组件实例
};

// 封装mount渲染工具，同样注入主题上下文
export const mountWithStyles = (componentNode) => {
  return mount(
    <MuiThemeProvider theme={theme}>
      {componentNode}
    </MuiThemeProvider>
  );
};

为什么这个方案更好？ #

• 直接用官方的MuiThemeProvider包裹组件，这是Material-UI推荐的主题传递方式，完全避免了手动处理上下文的潜在风险（比如你之前通过getChildContext拿上下文的方式，组件内部实现一变就可能失效）。
• 针对shallow渲染，.dive()能帮你直接拿到目标组件，不用额外处理上下文传递的问题，后续写断言也更顺手。
• 代码结构清晰，可读性拉满，维护起来也省心。

举个实际测试的例子 #

假设你的Styled Button组件是这样的：

import React from 'react';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = (theme) => ({
  customButton: {
    backgroundColor: theme.palette.primary.main,
    padding: theme.spacing(2),
  },
});

const StyledButton = ({ classes, children }) => (
  <Button className={classes.customButton}>{children}</Button>
);

export default withStyles(styles)(StyledButton);

测试的时候就可以这么用：

import StyledButton from './StyledButton';
import { shallowWithStyles } from './test-utils';

describe('StyledButton Component', () => {
  it('应该渲染正确的自定义样式类', () => {
    const wrapper = shallowWithStyles(<StyledButton>点击我</StyledButton>);
    expect(wrapper.hasClass('customButton')).toBe(true);
  });
});

要是你用的是MUI v5，只需要把导入路径换成@mui/material/styles和@mui/material/Button就行，用法基本没差。

内容的提问来源于stack exchange，提问作者dean glückler