Jest/RTL测试下MUI V5+Emotion主题未注入样式问题求助

排查解决步骤 #

• 双Provider上下文同步
  MUI 自带的ThemeProvider默认仅向 MUI 生态的样式 API 注入主题，不会同步到 Emotion 原生上下文。你需要额外嵌套 Emotion 官方的ThemeProvider，保证两边上下文的主题一致，修改你的ThemeWrapper代码如下：

// 新增导入Emotion的ThemeProvider
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';

const ThemeWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <EmotionThemeProvider theme={theme}>
      <MuiThemeProvider theme={theme}>
        {children}
      </MuiThemeProvider>
    </EmotionThemeProvider>
  );
};

Storybook 运行正常大概率是因为你在 Storybook 的全局配置里已经提前配置了 Emotion 的 ThemeProvider，而业务/测试代码里没有对应配置。

• styled 调用写法修正
  你当前将buildStyles直接传入 styled 模板字符串的写法，在部分 MUI 小版本中存在参数注入异常的问题，可改为显式接收 props 调用的写法，强制 MUI 完成主题注入：

// 修改Badge.styles.tsx的导出逻辑
export const StyledBadge = styled(MuiChip)<BadgeStyleProps>(
  (props) => buildStyles(props)
);

• 依赖版本一致性校验
  执行依赖查询命令检查所有 Emotion 相关包的版本是否一致：

# npm环境
npm ls @emotion/react @emotion/styled
# yarn环境
yarn list @emotion/react @emotion/styled

如果存在多个版本，统一所有 Emotion 包的版本号即可解决上下文隔离导致的主题无法传递问题。

• 主题对象一致性校验
  确认你测试/业务代码中导入的theme和 Storybook 中使用的是同一个实例，检查createTheme调用时是否正确扩展了palette.expanded字段。你可以在buildStyles函数内打印theme对象，确认运行时是否存在你需要的自定义字段。

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