[docs] useMediaQuery + test env (matchMedia)

[bbehling-trimble]

When I inject withMobileDialog into a React component, I cannot access members of the component.

I've tried dive, Material UI shallow, mount, enzyme shallow and mount to no avail.

Without injecting withMobileDialog, I can access the members without a problem.

How do I access members on the component when using withMobileDialog()

Component

class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.postCount = 5;
    this.posts = this.getPosts();
  }

  setOpen = () => {
    if (this.showPosts()) {
      this.setState({ open: true });
    }
  };


  render() {
    return (
      ...
    );
  }
}

export default compose(
  observer,
  withStyles(styles),
  withMobileDialog()
)(Blog);

Test

import React from 'react';
//import { mount } from 'enzyme';
import Blog from '../blog';
import { Switch, Redirect } from 'react-router-dom';
import sinon from 'sinon';
import blog from '../blog';
import { createShallow, createMount } from '@material-ui/core/test-utils';

describe('Blog', () => {
  let blogWrapper, shallow, mount;
  beforeEach(() => {
    shallow = createShallow(); 
    mount = createMount();
  });

  it('should render private page with its router', () => {



    blogWrapper = shallow(
      <Blog

      />
    );

    // setOpen is undefined
    const toggleSpy = jest.spyOn(blogWrapper.instance(), 'setOpen');

    expect(blogWrapper.state.open).toBeTrue();
  });

});

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[koshea]

Hi @oliviertassinari, I think this may be an actual bug. I encountered it as well. It is at least a regression. I have not solved it yet, but it seems to be introduced by 942fbf2#diff-33a03947dab1f076cc15415d619e4987

Before this commit, mount worked fine on components wrapped in withMobileDialog(). After, the resulting component is empty.

[oliviertassinari]

@koshea How can we reproduce the problem?

[koshea]

@oliviertassinari see here: https://github.com/koshea/jest-mui-withmobiledialog

The mounted component will be empty in version 4.1.1. If you revert to 4.0.2 the test will pass.

[oliviertassinari]

@koshea Thank you for the reproduction. I can confirm the issue. It's an issue with the test environment. The withWidth helper renders null if he can't compute the correct value. We used to rely on window.innerWidth, we rely on window.matchMedia now. I think that we should add a section about tests in the documentation.

In your case, you can workaround the problem with:

import mediaQuery from 'css-mediaquery';

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

describe('MyTests', () => {
  beforeAll(() => {
    // Wait for JSDOM support
    window.matchMedia = createMatchMedia(window.innerWidth);
  });

or use https://github.com/bigslycat/mq-polyfill.

[koshea]

That solves it and makes complete sense, thank you @oliviertassinari!

[bbehling-trimble]

Why was the title of this issue changed?

[oliviertassinari]

@bbehling-trimble We need to document how this match media logic can be tested, for instance, we Jest and react-testing-library.

[bbehling-trimble]

@oliviertassinari Well, the issue wasn't originally submitted regarding media queries. This code will still need to be tested when in desktop top view.

[oliviertassinari]

I agree it's unfortunate. Your test environment needs to be consistent. If window.innerWidth returns a value, window.matchMedias should follow it.

[bbehling-trimble]

The problem isn't testing for mobile, its testing in desktop mode. We dont do anything with setting window props

[caio-borghi-yapi]

@koshea Thank you for the reproduction. I can confirm the issue. It's an issue with the test environment. The withWidth helper renders null if he can't compute the correct value. We used to rely on window.innerWidth, we rely on window.matchMedia now. I think that we should add a section about tests in the documentation.

In your case, you can workaround the problem with:

import mediaQuery from 'css-mediaquery';

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

describe('MyTests', () => {
  beforeAll(() => {
    // Wait for JSDOM support
    window.matchMedia = createMatchMedia(window.innerWidth);
  });

or use https://github.com/bigslycat/mq-polyfill.

This solution is not working for v5

[PrakharMathur619]

@koshea Thank you for the reproduction. I can confirm the issue. It's an issue with the test environment. The withWidth helper renders null if he can't compute the correct value. We used to rely on window.innerWidth, we rely on window.matchMedia now. I think that we should add a section about tests in the documentation.
In your case, you can workaround the problem with:

import mediaQuery from 'css-mediaquery';

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

describe('MyTests', () => {
  beforeAll(() => {
    // Wait for JSDOM support
    window.matchMedia = createMatchMedia(window.innerWidth);
  });

or use https://github.com/bigslycat/mq-polyfill.

This solution is not working for v5

Yes I am also facing the same issue.
Using -> "@mui/material": "^5.6.4"

Did you find a solution to this?

[onurcanavci]

@koshea Thank you for the reproduction. I can confirm the issue. It's an issue with the test environment. The withWidth helper renders null if he can't compute the correct value. We used to rely on window.innerWidth, we rely on window.matchMedia now. I think that we should add a section about tests in the documentation.
In your case, you can workaround the problem with:

import mediaQuery from 'css-mediaquery';

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

describe('MyTests', () => {
  beforeAll(() => {
    // Wait for JSDOM support
    window.matchMedia = createMatchMedia(window.innerWidth);
  });

or use https://github.com/bigslycat/mq-polyfill.

This solution is not working for v5

Yes I am also facing the same issue. Using -> "@mui/material": "^5.6.4"

Did you find a solution to this?

Do you have any solution for @Mui5?

[Momotoculteur]

Hi,
workaround do not work for MUI v5 :(