[docs] Trying to mock MUI's useMediaQuery hook behaviour in Enzyme test

Duplicates

• I have searched the existing issues

Related page

https://mui.com/material-ui/react-use-media-query/#testing

Kind of issue

Unclear explanations

Issue description

I’m following MUI’s documentation on how to test useMediaQuery, but I am confused as to whether or not the way I am using useMediaQuery in my component, which is using MUI’s breakpoint helpers, is compatible with the testing instructions in MUI’s docs.

Context 🔦

Here’s the code in my component:

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

  const List = () => {
      const theme = useTheme();
      const isDownLargeBreakpoint = 
      useMediaQuery(theme.breakpoints.down('lg'));

      ...
      
      {isDownLargeBreakpoint && (
          <ul className="list">
            // list items
          </ul>
      )}

  }

The useMediaQuery hook works as expected when I run my app locally, it correctly toggles between true and false when I resize the screen below/above MUI’s theme lg breakpoint.

When I try to run my test with the recommended method of setup, despite the window.innerWidth falling below what would satisfy useMediaQuery to return a value of true I always get false in my test. Perhaps it’s because I’m not rerendering my component from within my test? Or do I have to do something more in my it clause to trigger what is needing to happen?

Here’s the block of code using css-mediaquery recommended by MUI:

import mediaQuery from 'css-mediaquery';

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, {
      width,
    }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe('MyTests', () => {
  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });
});

Here’s how I’ve organized my test file:

import React from 'react';
import { shallow } from 'enzyme';
import mediaQuery from 'css-mediaquery';

import SessionStore from 'app/stores/SessionStore';

import CustomFields from '../CustomFields';
import CustomFieldButton from '../CustomFieldButton';

import PrepareFieldsList from '../PrepareFieldsList';

describe('PrepareFieldsList Component', () => {
  let wrapper;

  function createMatchMedia(width) {
    return (query) => ({
      matches: mediaQuery.match(query, {
        width,
      }),
      addListener: () => {},
      removeListener: () => {},
    });
  }

  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });

  const defaultProps = {
    customFields: [
      {
        data: null,
        id: 'fieldId',
        name: '',
        required: false,
        value: 'test',
      },
    ],
  };

  beforeEach(() => {
    jest.spyOn(SessionStore, 'getSession').mockReturnValue({
      hasFeature: () => true,
    });
    wrapper = shallow(<PrepareFieldsList {...defaultProps} />);
  });

  ...

  it('should render CustomFieldButton and CustomFields when hasFeature is true', () => {
    expect(wrapper.find(CustomFieldButton)).toHaveLength(1);
    expect(wrapper.find(CustomFields)).toHaveLength(1);
  });
});

[mnajdova]

Re-opening so that we track the issue in order to improve the documentation.

[oliviertassinari]

I’m closing, this is beyond the scope of what we can support as a GitHub issue. Stack Overflow sounds the right place for this. The docs mentions how a polyfill can be created, the actual implementation is then up to the developers to pull off, and depend on the testing environment they use. I would recommend providing a reproduction.

If you find the root problem, sharing the solution would be great to help future people facing the same problem.