React + Jest 单元测试中的 Material-UI 排版错误答案

【问题标题】：Material-UI typography error in React + Jest unit testReact + Jest 单元测试中的 Material-UI 排版错误
【发布时间】：2024-05-19 19:25:01
【问题描述】：

当我在浏览器中运行我的 React Web 应用程序时，我没有看到任何警告，但在我的单元测试运行期间，我收到了 Material-UI 排版错误。

警告：Material-UI：您正在使用已弃用的排版变体，这些变体将在下一个主要版本中删除。请阅读https://material-ui.com/style/typography#migration-to-typography-v2下的迁移指南

请建议如何解决该问题。

迁移指南在这方面没有帮助，因为我已将所有 Typography 变体升级到文档中提到的最新版本。

@material-ui/core 版本：3.5.1

yarn run v1.9.4 $ node scripts/test.js --env=jsdom

PASS src/containers/Login/Login.spec.js ● 控制台

console.error node_modules/warning/warning.js:34
  Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.
  Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2

【问题讨论】：

请包含您的@material-ui/core 版本和完整的错误消息（包括堆栈跟踪）
@epsilon 已更新。
看起来您忘记了堆栈跟踪。您是否真的在测试中将组件包装在 MuiThemeProvider 中？大多数人不这样做是因为他们依赖于浅层渲染。

标签： reactjs unit-testing jestjs material-ui typography

【解决方案1】：

您似乎没有使用与迁移指南中提到的主题相似的主题：

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

如果您不使用主题，请设置window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;。

【讨论】：

我使用指南中提到的自定义主题。
const theme = createMuiTheme({ 排版: { useNextVariants: true, fontFamily: '"Lato", "Helvetica", "Arial", sans-serif', htmlFontSize: 16 }, shape: {borderRadius ：0 }，调色板：{主要：{光：“#A6CAE8”，主要：“#7bacd5”，黑暗：“#3975A7”，对比文本：“#fff”}，次要：{光：“#AEB5DE”，主要: "#ff00a8", 深色: "#585F8B", contrastText: "#CACCDE" } } });
我在主题方面也有一些自定义更改。
您确定具有该主题的MuiThemeProvider 位于组件树的顶部吗？任何未包含在提供的材料中的材料用户界面组件都可能触发该警告。
我在 App.js 中定义了自定义主题，并以如下方式添加：
{isLoading ? : null} {isAutheticated ? ( {routes} ) : ( {routes} )}