I found a trick after some investigation.

You can hack materialUI by passing a custom theme to your mount. If you look the withWidth.js file you can see that the WithWidth method extract some properties from the current theme.

And if you read comments about initialWidth in PropTypes definition, you understand that initialWidth allows you to define a basic width, even if you are in jsdom env 😉

So, for me, I use it like this and my mounted component generate my Hidden children correctly.

const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'xs' } } })
const wrapper = createMount()(<MuiThemeProvider theme={theme}>
        <MyComponentWithHidden />
    </MuiThemeProvider>);

OK, so the implication is that something about Material UI’s Hidden component’s JS implementation conflicts with jsdom, or, uses hooks in a way that doesn’t work with mount (which would be a surprising and new problem, and one that definitely needs fixing).

That leads me here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Hidden/HiddenJs.js

It’s using useTheme, but this seems unrelated; withWidth() seems to be relevant, which leads me here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/withWidth/withWidth.js

This seems to be using media queries. https://github.com/jsdom/jsdom/blob/d6f8a97b5fb7709d6ad0215c1ae95fd4cab58489/lib/jsdom/level2/style.js#L29 and testing-library/jest-dom#113 both strongly suggest that jsdom does not support media queries - which means that it’s impossible to test this implementation outside of a real browser (a suggestion like this: jsdom/jsdom#2342 (comment) which has you manually set the width may work, but probably won’t work with media queries)

Thus, I’m going to close this since it’s either a bug in jsdom, or a flaw in Material UI’s choice of implementation.

I’d suggest using shallow rendering anyways - testing Material UI itself is not something you really need to care about, since that’s what its own tests cover.

Thanks for the investigation - much appreciated.

In response to your last comment - I am not actually testing MaterialUI, what I am testing is that the developer has coded to spec, i.e. certain elements should be visible on a page when on a desktop browser but not when on a mobile device.

I will raise this as an issue on both the MaterialUI and jsdom github repos to see if either of them can shed any further light on how to fix this.

@ljharb You are right. We encourage the usage of a media query polyfill with jsdom in the documentation https://material-ui.com/components/use-media-query/#testing. And thanks for looking at it ❤️!

@ljharb You are right. We encourage the usage of a media query polyfill with jsdom in the documentation https://material-ui.com/components/use-media-query/#testing. And thanks for looking at it ❤️!

That solution in the MUI docs worked for me:

import mediaQuery from 'css-mediaquery';

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

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

I found a trick after some investigation.

You can hack materialUI by passing a custom theme to your mount. If you look the withWidth.js file you can see that the WithWidth method extract some properties from the current theme.

And if you read comments about initialWidth in PropTypes definition, you understand that initialWidth allows you to define a basic width, even if you are in jsdom env 😉

So, for me, I use it like this and my mounted component generate my Hidden children correctly.

const theme = createMuiTheme({ props: { MuiWithWidth: { initialWidth: 'xs' } } })
const wrapper = createMount()(<MuiThemeProvider theme={theme}>
        <MyComponentWithHidden />
    </MuiThemeProvider>);

It seems that as of MUI v5, this solution (which worked great for us for a while! thanks!) no longer works unfortunately, as it seems they have entirely removed WithWidth, so it’s no longer possible to specify it with this props solution during theme creation. They did change their theming structure but there is no equivalent alternative in this new format to specify anything for withWidth in this way, since withWidth is gone. In our code base we had to switch a lot of components to using css media queries in their classes, since those do respond to global.innerWidth = ... calls in test rendering, at least for our class components. For our functional components we could follow this part of the migration guide to switch to the useMediaQuery hook, at least for our Hidden components.

My solution to test content - wrapped in Hidden element:

 it('should display correct score of the selected question while landing on question player', () => {
            const topPanelScoreHiddenElement = questionPlayer.find('div[data-testid="assessment-top-panel-score"]').find(Hidden).at(0)
            const topPanelScore = mount(<>{topPanelScoreHiddenElement.prop('children')}</>)

            expect(topPanelScore.find('h4').text())
                .toEqual('2 / 12')
        })

For anybody using Typescript:

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

or

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

Or with jest:

function createMatchMedia(width: number): (query: string) => MediaQueryList {
  return (query: string) =>
    ({
      matches: mediaQuery.match(query, { width }),
      addListener: jest.fn(),
      removeListener: jest.fn(),
    }) as any;
};

@japser36, do you have an example of the changes you made? I am struggling with this same issue, and changing global.innerWidth doesn’t seem to be affecting when I use useMediaQuery, or if I use the sx display prop.

My solution to test content - wrapped in Hidden element:

 it('should display correct score of the selected question while landing on question player', () => {
            const topPanelScoreHiddenElement = questionPlayer.find('div[data-testid="assessment-top-panel-score"]').find(Hidden).at(0)
            const topPanelScore = mount(<>{topPanelScoreHiddenElement.prop('children')}</>)

            expect(topPanelScore.find('h4').text())
                .toEqual('2 / 12')
        })

Your solution work for me, thank you! I just put:

const showHiddenElement = listComponent .find(‘li[id=“listWithBreakline”]’) .find(‘Hidden’) .at(0); const mountedHiddenElement = mount( <>{showHiddenElement.prop(‘children’)}</> ); expect(mountedHiddenElement).toMatchSnapshot();

And we can see the element in the snapshot! We can put the id on the Hidden element and find by him:

const showHiddenElement = listComponent.find(‘Hidden’).find(‘#xsUP’).at(0); const mountedHiddenElement = mount( <>{showHiddenElement.prop(‘children’)}</> ); expect(mountedHiddenElement).toMatchSnapshot();