小编Iho*_*hor的帖子

React 测试库在渲染期间不会应用sxMaterial UI 组件的 props。

例如，我指定属性以在某些断点处隐藏元素。

<>
  <AppBar
    data-testid="mobile"
    ...
    sx={{
      display: { xs: "block", sm: "none" }
    }}
  >
    MOBILE
  </AppBar>
  <AppBar
    data-testid="desktop"
    ...
    sx={{
      display: { xs: "none", sm: "block" }
    }}
  >
    DESKTOP
  </AppBar>
</>

在浏览器中一切都按预期工作。在 React 测试库中渲染时，我得到包含两个元素的结果。从样式上可以明显看出，它们是基本的，并且sx没有应用该属性。链接到codesandbox

import { ThemeProvider } from "@mui/material/styles";
import { screen, render } from "@testing-library/react";
import darkTheme from "./darkTheme";
import App from "./App";

describe("Demo", () => {
  it("should have display props", () => { …