search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
6.95k stars 297 forks source link

How to write test case for <MediaQuery minDeviceWidth={1024}> ? #275

Closed kajalj3098 closed 1 year ago

kajalj3098 commented 2 years ago

image this doesnt works for me

yocontra commented 2 years ago

You probably need to set deviceWidth not width in the ResponsiveContext.Provider value prop

arturmiglio commented 2 years ago

I've just lost like 3 hours because this is not well documented. Could you please review the documentation around testing in the Readme?

I'm guessing this is not the first time someone gets stuck (and tries mocking matchMedia in their test env). Thanks in advance!

yocontra commented 1 year ago

@arturmiglio If there are improvements you'd like to see in the documentation please feel free to make a PR to add more information. I try as best as I can to make the docs informative but it is a large surface area and hard to document every single possible way it could be used. FWIW the deviceWidth property is in the README right in the section describing how to emulate a device for testing: https://github.com/yocontra/react-responsive#forcing-a-device-with-the-device-prop=