使用材料UI主题提供程序配置酶测试

Question

大家好，我有一个问题，目前我使用材料ui在我的应用程序与反应，但我需要包装每个组件与ThemeProvider在测试中获得主题通过道具

const wrapperFilter = mount(
<MuiThemeProvider theme={createTheme(defaultTheme)}>
<StylesProvider generateClassName={createGenerateClassName()}>
<ThemeProvider theme={defaultTheme}>
<SortFilter {...props} />
</ThemeProvider>
</StylesProvider>
</MuiThemeProvider>
);

，但我认为这是不正确的方式，我试图通过setupTest.js注入，但我只有选项来设置默认主题

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { ThemeConsumer } from "styled-components";
import { defaultTheme } from './@next/globalStyles';

// set default theme for enzyme renderer
ThemeConsumer._currentValue = defaultTheme;
configure({ adapter: new Adapter() });

任何想法?

Answer 1

我使用React 18, MUI v5和酶进行测试。我遇到了同样的问题，我所做的是:

1. 创建一个文件，该文件将在我的测试中包装我的组件，注入主题并使用shallow from enzyme:

// enzymeThemeWrapper.js
import React from 'react';
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import theme from 'resources/myTheme';
import { shallow } from 'enzyme';
export const shallowMUITheme = component =>
shallow(
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>{component}</ThemeProvider>
</StyledEngineProvider>,
);

2. 然后在我的测试中这样使用:

import React from 'react';
import { shallowMUITheme } from 'utils/enzymeThemeWrapper';
import Screen from '../screen';
describe('screen', () => {
it('should render screen', () => {
const component = shallowMUITheme(
<Screen />,
);
expect(component).toMatchSnapshot();
});
});

你可能从那时起就明白了，我很想知道你想出了什么解决方案来解决你的问题。

Answer 2

你好，很抱歉这么晚才回复，这发生在很多年前，但我记得我使用了类似的解决方案，因为你的注释包装我的组件