React-md: NavigationDrawer - window.matchMedia is not a function in some scenarios using jest

[clenondavis]

Description

Hi @mlaursen and react-md team, how you doing?.

Thanks for the amazing contribution with this frontend lib. Its has been useful for my project.

I appreciate your time in reading this issue description.

I'm trying to create the unit testing for one of the container using jest as the testing lib. When i run this test i have receiving this error.

TypeError: window.matchMedia is not a function

I isolated the unite testing and the react-md implementation in a new create-react-app project, but when i run the test I still receiving the same issue. So I don't know if it something I'm doing wrong or I missing something. It seems like this only happening with NavigationDrawer or Drawer Implementation.

I'll appreciate your time and help.

See img bellow with the error

Images/Screenshots

Link to a gist or code sample where the issue can be reproduced

The issue can not reproduced, because id did find out how to run the jest in codepen using create-react-app as a template. But you can see the test commented on the bottom if the js file.

https://codepen.io/clenondavis/pen/gdPbpw?editors=1111

Code in gist

https://gist.github.com/clenondavis/fdcf83f1ab7b382f8aee2e4218e73581

Version

• React -^16.4.2
• react-dom ^16.4.2,
• React-MD - ^1.5.0
• create-react-router 1.5.2
• react-router-dom ^4.3.1
• react-scripts 1.1.5
• Browser Versión 68.0.3440.106 (Build oficial) (64 bits)

Thanks.

[mlaursen]

Oh, I think I ran into this problem before with my documentation server tests. I ended up using a setup script to mock this since some testing environments don't have matchMedia.

https://github.com/mlaursen/react-md/blob/caeab56ea71be2ce446f30403b1e97020c931be3/docs/src/beforeTest.js#L12-L14
https://github.com/mlaursen/react-md/blob/caeab56ea71be2ce446f30403b1e97020c931be3/src/js/Drawers/__tests__/Drawer.js

I can update the testing page on the documentation site to add these cases.

[clenondavis]

Hi @mlaursen, how you doing man?

Thanks for your quick answer.

Yes, I see know. Inspecting the Drawer.js code i get to find out that. As how you mention, It's a good idea to add this scenarios as a test case.

Thanks for the solution you shared with me, I have not received any more this bug.

I appreciate your help man.

Thanks,
Best regards.