如何配置Enzyme测试适配Material UI的Theme Provider？

方案1：封装通用测试渲染工具（最推荐） #

该方案不依赖任何框架内部私有属性，兼容性最强，也支持灵活的自定义主题配置：

1. 新建公共测试工具文件 test/utils/renderWithTheme.js，代码如下：

import { mount } from 'enzyme';
import { MuiThemeProvider, createTheme, StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
import { ThemeProvider } from 'styled-components';
import { defaultTheme } from '../../@next/globalStyles';

export const mountWithTheme = (Component, customTheme = {}) => {
  const finalTheme = { ...defaultTheme, ...customTheme };
  return mount(
    <MuiThemeProvider theme={createTheme(finalTheme)}>
      <StylesProvider generateClassName={createGenerateClassName()}>
        <ThemeProvider theme={finalTheme}>
          {Component}
        </ThemeProvider>
      </StylesProvider>
    </MuiThemeProvider>
  );
};

2. 测试用例中直接调用该方法即可，无需重复包裹Provider：

import { mountWithTheme } from 'test/utils/renderWithTheme';

// 测试时直接传入组件即可
const wrapperFilter = mountWithTheme(<SortFilter {...props} />);

// 需自定义测试主题时传入第二个参数即可
const customWrapper = mountWithTheme(<SortFilter {...props} />, { primaryColor: '#f00' });

该方案后续如果需要新增其他全局Provider（比如Redux Provider、React Router Provider），仅需修改工具函数一处，所有测试用例自动生效。

方案2：全局挂载渲染方法（适合大型项目减少重复导入） #

如果不想每次测试都导入工具函数，可以在setupTest.js中把工具方法挂载到全局对象：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// 引入上面封装的mountWithTheme方法
import { mountWithTheme } from 'test/utils/renderWithTheme';

configure({ adapter: new Adapter() });
// 挂载到全局，所有测试文件可直接调用
global.mountWithTheme = mountWithTheme;

注意事项 #

你目前通过修改ThemeConsumer._currentValue注入主题的方式不建议长期使用：该属性是styled-components的内部私有属性，不属于官方公开API，一旦依赖包版本迭代修改了内部实现，会导致全量测试用例批量失效，维护成本极高。

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