如何使用 Enzyme 或 React 测试库在 React 中测试 Material-UI 的响应式 UI（例如隐藏、网格、断点）

如何测试 Material-UI 中的响应式元素？

Example:

import React from "react";
import Hidden from "@material-ui/core/Hidden";

const HideOnMobile = (props) => {
  return <Hidden xsDown>{props.children}</Hidden>;
};

测试用例：

describe(HideOnMobile, () => {
  describe("when screensize is sm", () => {
    it("shows children", () => {});
  });

  describe("when screensize is xs", () => {
    it("hides children", () => {});
  });
});

MUI v5

不幸的是，v4 解决方案不适用于 v5 https://github.com/enzymejs/enzyme/issues/2179#issuecomment-938249468.

MUI v4

正如所解释的here https://github.com/enzymejs/enzyme/issues/2179#issuecomment-529320192您可以使用主题道具来设置 MUI 的大小属性：

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

const SizeWrapper = (props) => {
  const theme = createMuiTheme({
    props: { MuiWithWidth: { initialWidth: "sm" } },
  });

  return <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>;
};

例如使用 React 测试库：

describe(HideOnMobile, () => {
  describe("when screensize is sm", () => {
    it("shows children", () => {
      const testMessage = "Test Message";
      render(<HideOnMobile>{testMessage}</HideOnMobile>, { wrapper: SizeWrapper });

      expect(screen.getByText(testMessage)).toBeInTheDocument();
    });
  });
});