search

yocontra / react-responsive

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

Unable to test with Cypress #225

Closed single-stop-neil closed 5 years ago

single-stop-neil commented 5 years ago

Hello. I think this is an issue with react-responsive but it's possible that it may be an issue with Cypress.

I am using functional components with React 16.8. The returns of all of the components are fragments which wrap <MediaQuery /> components that render different content for tablet and mobile (desktop work is in process). The MediaQuery components take a query parameter.

When running Cypress tests, I call cy.viewport() in the beforeEach() handler. Cypress renders no content at all. The only way to get the Cypress tests to run properly is if I open the developer tools in the browser window that Cypress controls and manually set the device emulator.

yocontra commented 5 years ago

Can you post a reproduction repo + code sample?

single-stop-neil commented 5 years ago

Hi Contra. I think it's not a bug, but rather a mistake I made.

Screen Shot 2019-08-26 at 5 19 34 PM

This is the constants file where I declared the queries that I use. I just changed them so that they say min-width and max-width as opposed to min-device-width and max-device-width. Now it works in Cypress. It has worked all along in Chrome dev tools and also when we view it on tablets and phones via ngrok, so I'm a bit confused.

Thanks very much for the super speedy reply!!!

yocontra commented 5 years ago

@single-stop-neil No worries, glad you were able to figure it out - I see people get tripped up on those all the time so if you see anywhere in the docs we could put a note feel free to send a PR.