Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes. In this article, we will see how to test design breakpoints using Jest, React Testing Library and CSS Media Queries.

Setting up the environment

We will start by setting up a simple React component that changes its text based on the screen size. This React component does use useMediaQuery,useTheme from MUI library in order to handle the breakpoints logic.

Here’s the code for our component:

import * as React from "react";
import { useMediaQuery, useTheme } from "@mui/material";

export default function App() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.only("xs")); // between 0 and 600px
  const isTablet = useMediaQuery(theme.breakpoints.only("sm")); // between 600px and 900px
  const isDesktop = useMediaQuery(theme.breakpoints.up("md")); // above 900px

  return (
    <React.Fragment>
      {isMobile && <span>Hello Mobile</span>}
      {isTablet && <span>Hello Tablet</span>}
      {isDesktop && <span>Hello Desktop</span>}
    </React.Fragment>
  );
}

So in case the screen size fits the condition on mobile screens (>0px and <= 600px), the text Hello Mobile will be rendered on the screen. and the same will be applied for the rest of the break points.

MUI Breakpoints.

---

Mobile View:

Tablet View:

Desktop view:

Cool, now let’s dig into testing part.

---

Testing

First, let’s install the react-testing-library as a dependency in our project sample:

yarn add @testing-library/react

In order to test breakpoints in jest, we need an implementation of matchMedia in our test environment.

So far, jsdom doesn’t support it yet. which means we need to polyfill it. Using css-mediaquery to emulate it. So let’s install css-mediaquery as well:

yarn add css-mediaquery

Now, let’s create a function that returns MediaQueryList object which can then be used to determine if the document matches the media query string.

In your test file, add the following implementation:

import { render, screen } from "@testing-library/react";
import MyApp from "./App";
import mediaQuery from "css-mediaquery";

function createMatchMedia(width) {
  return (query) => {
    return {
      matches: mediaQuery.match(query, { width }),
      media: "",
      addListener: () => {},
      removeListener: () => {},
      onchange: () => {},
      addEventListener: () => {},
      removeEventListener: () => {},
      dispatchEvent: () => true,
    };
  };
}

function resizeScreenSize(width) {
  window.matchMedia = createMatchMedia(width);
}

The function resizeScreenSize will be called in each test suit with the breakpoint width, which is gonna call createMatchMedia function, that will determine if the document matches the query string or not.

Now, let’s add our first test case for mobile screens:

it("renders correctly on mobiles screens", () => {
  // Set the screen size to a smaller value
  resizeScreenSize(400);

  // Render the component
  render(<MyApp />);

  // Verify that the component styles are correct for the default screen size
  const pElement = screen.getByText("Hello Mobile");
  expect(pElement).toBeInTheDocument();
});

• First, Call resizeScreenSize(400), with any number less than 600px to meet the condition that this view is mobile view.
• Then, render the component.
• Lastly, verify that the rendered text in the component is matching what we’re expecting.

Applying the above to the other two cases, we will end up with the following testing implementation:

import { render, screen } from "@testing-library/react";
import MyApp from "./App";
import mediaQuery from "css-mediaquery";

function createMatchMedia(width) {
  return (query) => {
    return {
      matches: mediaQuery.match(query, { width }),
      media: "",
      addListener: () => {},
      removeListener: () => {},
      onchange: () => {},
      addEventListener: () => {},
      removeEventListener: () => {},
      dispatchEvent: () => true,
    };
  };
}

function resizeScreenSize(width) {
  window.matchMedia = createMatchMedia(width);
}

describe("App Component", () => {
it("renders correctly on mobiles screens", () => {
  // Set the screen size to a smaller value
  resizeScreenSize(400);

  // Render the component
  render(<MyApp />);

  // Verify that the component styles are correct for the default screen size
  const pElement = screen.getByText("Hello Mobile");
  expect(pElement).toBeInTheDocument();
});

  it("renders correctly on tablets screens", () => {
    // Set the screen size to a smaller value
    resizeScreenSize(600);

    // Render the component
    render(<MyApp />);

    // Verify that the component styles are correct for the default screen size
    const pElement = screen.getByText("Hello Tablet");
    expect(pElement).toBeInTheDocument();
  });

  it("renders correctly on desktop screens", () => {
    // Set the screen size to a smaller value
    resizeScreenSize(900);

    // Render the component
    render(<MyApp />);

    // Verify that the component styles are correct for the default screen size
    const pElement = screen.getByText("Hello Desktop");
    expect(pElement).toBeInTheDocument();
  });
});

and by running the command `yarn test`, we can see all the tests have passed 👏👏

---

Source code.

Photo from Unsplash.