Search code examples
reactjsmobilebreakpointscypressreact-testing-library

How to test a React app in mobile dimensions?

I'm building a React app and I'm testing it with Cypress and React Testing library.

I was wondering: How can I test the app "on mobile". Meaning how can I write tests for the app that run if the window size is below the breakpoint? I couldn't find anything about that in the respective packages documentation.

Solution

  • You may need to check this page - https://docs.cypress.io/api/commands/viewport.html

    You can control the size and orientation of the screen for your application. There are also preset dimensions available already for various devices,

    Preset width height

    • macbook-15 1440 900
    • macbook-13 1280 800
    • macbook-11 1366 768
    • ipad-2 768 1024
    • ipad-mini 768 1024
    • iphone-6+ 414 736
    • iphone-6 375 667
    • iphone-5 320 568
    • iphone-4 320 480
    • iphone-3 320 480

    Just need to pass cy.viewport('iphone-6') which will set the viewport to 375px x 667px. Hope this helps.