Mocha测试中用React Testing Library+jsdom渲染MUI组件报错求助

问题根源 #

你碰到的TypeError: Cannot read properties of null (reading 'registered')，本质是MUI组件依赖**MUI主题上下文（ThemeContext）**才能正常工作，直接渲染MUI组件时没有提供这个上下文，导致内部逻辑尝试访问未初始化的空对象，进而报错。

解决步骤 #

1. 全局配置测试包裹器（推荐，适配海量测试场景） #

因为你有1750+个测试用例，全局配置能避免每个文件重复写包裹代码：

• 新建测试入口文件（比如test-setup.js），封装带上下文的自定义渲染函数：

import { render as rtlRender } from '@testing-library/react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// 用默认主题，也可以替换成你项目的自定义主题
const defaultTheme = createTheme();

export const render = (ui, options) => {
  const Wrapper = ({ children }) => (
    <ThemeProvider theme={defaultTheme}>
      <CssBaseline /> {/* 可选，重置全局样式，避免样式干扰测试 */}
      {children}
    </ThemeProvider>
  );

  return rtlRender(ui, { wrapper: Wrapper, ...options });
};

• 在Mocha配置文件（比如.mocharc.js）里指定这个入口：

module.exports = {
  require: ['./test-setup.js'],
  // 其他Mocha配置项
};

2. 单个测试文件手动包裹（临时/特殊场景用） #

如果部分测试需要自定义主题，可在对应测试里手动添加包裹：

import { render } from '@testing-library/react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';

describe('MUI Box Component', () => {
  it('renders without error', () => {
    const customTheme = createTheme({
      palette: {
        primary: { main: '#1976d2' },
      },
    });

    render(
      <ThemeProvider theme={customTheme}>
        <Box>Test Content</Box>
      </ThemeProvider>
    );
  });
});

3. 额外注意事项 #

• 确认安装全MUI依赖：@mui/material、@emotion/react、@emotion/styled（MUI v5默认用emotion做样式引擎，若项目用styled-components需对应调整）。
• 如果项目用到MUI其他上下文（比如LocalizationProvider处理国际化），也要在包裹器里加上对应Provider。
• 检查global-jsdom版本，确保支持React 18+，建议用最新稳定版避免DOM环境兼容问题。

原理说明 #

MUI所有组件都依赖ThemeContext获取主题配置（颜色、间距、字体等），内部通过useTheme或高阶组件访问这个上下文。上下文缺失时，相关逻辑会尝试访问空对象的registered属性（通常是样式引擎的注册信息），从而抛出错误。用ThemeProvider提供主题上下文后，组件就能正常初始化渲染。

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