How to test Material-UI's Responsive UI (e.g. Hidden, Grid, Breakpoints) in React with Enzyme or React Testing Library

user_2771889 0
Viewed 3096

How to test responsive elements in Material-UI?

Example:

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

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

Test cases:

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

  describe("when screensize is xs", () => {
    it("hides children", () => {});
  });
});
material-ui react-testing-library enzyme reactjs unit-testing
1 Answers

MUI v5

Unfortunately, the v4 solution doesn't work for v5.

MUI v4

As explained here you can use theme props to set size properties for 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>;
};

For example using React Testing Library:

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();
    });
  });
});
user_27718890
Related