Testing Responsive Design with Screen Queries in Jest

Ensuring your application looks and functions correctly across various screen sizes is crucial for a good user experience. This challenge focuses on writing Jest tests that verify your components render correctly based on media queries, simulating different screen sizes and validating the expected behavior. This is a common and important task in modern front-end development.

Problem Description

You are tasked with creating Jest tests to verify that a React component, ResponsiveComponent, adapts its rendering based on screen size. The ResponsiveComponent uses CSS media queries to change its content and styling depending on whether the screen width is less than 768px (mobile), between 768px and 1024px (tablet), or greater than or equal to 1024px (desktop).

Your tests should:

1. Mock window.matchMedia: Since you can't directly control the browser window size in a Jest test, you need to mock the window.matchMedia function to simulate different screen sizes.
2. Render the component: Render the ResponsiveComponent using shallow or mount from a testing library like enzyme or react-testing-library.
3. Assert the expected rendering: Based on the mocked media query results, assert that the component renders the correct content and styling. This might involve checking for the presence of specific elements, their text content, or their CSS classes.
4. Test for all three screen sizes: Create tests for mobile, tablet, and desktop screen sizes.

ResponsiveComponent.tsx (Provided):

import React from 'react';

interface ResponsiveComponentProps {
  children: React.ReactNode;
}

const ResponsiveComponent: React.FC<ResponsiveComponentProps> = ({ children }) => {
  return (
    <div className="responsive-component">
      {/* Mobile (less than 768px) */}
      <style>
        {`
          @media (max-width: 767px) {
            .responsive-component {
              background-color: lightblue;
              padding: 10px;
              text-align: center;
            }
          }
        `}
      </style>

      {/* Tablet (768px - 1023px) */}
      <style>
        {`
          @media (min-width: 768px) and (max-width: 1023px) {
            .responsive-component {
              background-color: lightgreen;
              padding: 20px;
              text-align: left;
            }
          }
        `}
      </style>

      {/* Desktop (1024px and above) */}
      <style>
        {`
          @media (min-width: 1024px) {
            .responsive-component {
              background-color: lightcoral;
              padding: 30px;
              text-align: justify;
            }
          }
        `}
      </style>

      {children}
    </div>
  );
};

export default ResponsiveComponent;

Examples

Example 1: Mobile View (Screen width < 768px)

Input:  Mocking `window.matchMedia('(max-width: 767px)')` to return `matches: true` and other media queries to return `matches: false`.
Output: The component's background color should be lightblue, padding should be 10px, and text-align should be center.
Explanation: The mobile media query is triggered, applying the corresponding styles.

Example 2: Tablet View (768px <= Screen width <= 1023px)

Input: Mocking `window.matchMedia('(max-width: 767px)')` to return `matches: false`, `window.matchMedia('(min-width: 768px) and (max-width: 1023px)')` to return `matches: true`, and desktop media query to return `matches: false`.
Output: The component's background color should be lightgreen, padding should be 20px, and text-align should be left.
Explanation: The tablet media query is triggered, applying the corresponding styles.

Example 3: Desktop View (Screen width >= 1024px)

Input: Mocking `window.matchMedia('(max-width: 767px)')` to return `matches: false`, `window.matchMedia('(min-width: 768px) and (max-width: 1023px)')` to return `matches: false`, and `window.matchMedia('(min-width: 1024px)')` to return `matches: true`.
Output: The component's background color should be lightcoral, padding should be 30px, and text-align should be justify.
Explanation: The desktop media query is triggered, applying the corresponding styles.

Constraints

• You must use Jest and a testing library like enzyme or react-testing-library.
• You must mock window.matchMedia.
• The tests should be written in TypeScript.
• The tests should cover all three screen sizes (mobile, tablet, desktop).
• Assume the ResponsiveComponent is correctly implemented and you are only testing its responsiveness.

Notes

• Consider using jest.mock to mock window.matchMedia.
• You can use shallow or mount from your chosen testing library to render the component.
• Use assertions to verify the component's styling and content based on the mocked media query results.
• Pay close attention to the media query ranges to ensure you are mocking them correctly.
• The provided ResponsiveComponent uses inline styles for simplicity. In a real-world application, you would likely use CSS classes. The principle of testing media queries remains the same.