在我的 mocha 測驗代碼中，我有很多使用 mount 的測驗。
enzyme.mount(<SomeComponentThatUsesMUI />);
這在 material-ui v4 中運行良好。但是在 v5 中由于缺少默認主題，任何SomeComponentThatUsesMui嘗試訪問主題的代碼
現在我知道可以用 ThemeProvider 包裝組件：
enzyme.mount(<ThemeProvider theme={} ><<SomeComponentThatUsesMUI /><ThemeProvider />);
然而這意味著后續的測驗代碼需要調整，這是 100 次測驗。（我測驗的 5%）。
有沒有辦法為單元測驗恢復默認主題？
uj5u.com熱心網友回復：
警告：這個答案修改了兩個內部欄位（就像它們在 React 17.0.2 中一樣）。
如果 React Context 物件在內部發生變化，這將中斷
該事業null默認主題為：
@mui/private-theming/node/useTheme/ThemeContext.js
const ThemeContext = /*#__PURE__*/React.createContext(null);
當為 ThemeContext 呼叫 createContext 時，不會設定默認主題。
因此可以添加單元測驗設定代碼（在您的單元測驗運行之前）：
import { createTheme } from '@mui/material/styles';
import('@mui/private-theming/node/useTheme/ThemeContext.js').then(ThemeContext =>
{
let defaultTheme = React.createContext(createTheme({}));
if (ThemeContext.default)
{
ThemeContext.default._currentValue = defaultTheme._currentValue;
ThemeContext.default._currentValue2 = defaultTheme._currentValue2;
}
});
這會修改兩個內部欄位 ,_currentValue并將_currentValue2默認 ThemeContext 調整為等效于
const ThemeContext = /*#__PURE__*/React.createContext(createTheme({}));
uj5u.com熱心網友回復：
盡管此答案需要修改每個 mount 陳述句，但它不需要對測驗代碼進行任何后續更改。
提供wrappingComponent和wrappingComponentPropsargs 掛載：
let wrapper = enzyme.mount(<SomeComponentThatUsesMUI />,
{
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: createTheme({}) }
});
SomeComponentThatUsesMUI現在有一個主題，但包裝器仍然是指SomeComponentThatUsesMUI而不是 ThemeProvider。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330787.html