New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NavigationDrawer - window.matchMedia is not a function in some scenarios using jest #783

Closed
clenondavis opened this Issue Aug 24, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@clenondavis
Copy link

clenondavis commented Aug 24, 2018

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

image

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

This comment has been minimized.

Copy link
Owner

mlaursen commented Aug 25, 2018

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.

window.matchMedia = jest.fn(query => ({
matches: query.indexOf('(min-width: 1025px)') !== -1,
}));

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.

@mlaursen mlaursen added the bug label Aug 25, 2018

@clenondavis

This comment has been minimized.

Copy link
Author

clenondavis commented Aug 26, 2018

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.

@clenondavis clenondavis changed the title NavigationDrawer - TypeError: window.matchMedia is not a function displaying when using jest NavigationDrawer - window.matchMedia is not a function in some scenarios using jest Aug 26, 2018

@mlaursen mlaursen closed this in b3a4ee9 Dec 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment