Let's take a React Native application that implements the app navigation using React Navigation packages. Our application first shows a home screen. The user can navigate to the Pokemon List screen, and then to an individual Pokemon card.
How do we test the navigation when this React Native application is running through Expo? Notice in the above video the URL was not changing at all. Thus we cannot use the typical Cypress commands like cy.location and cy.hash to confirm the screen changes. Instead we need to use the page titles.
The Application implements the navigation like this:
The test finishes at the individual Pokemon card screen.
To go back to the Home screen the user would click the "<-" button at the top of the screen. The navigation library inserts the default accessible HTML markup for the button, even adding a label that includes the target screen's name.
Let's extend our test to navigate back to the Home screen. I like adding a log statement to the Command Log for major parts of the test.
1 2 3 4 5
cy.log('**go back to Home screen**') cy.get('[aria-label="PokeList, back"]').click().delay() cy.title().should('equal', 'PokeList').delay() cy.get('[aria-label="Home, back"]').click() cy.title().should('equal', 'Home').delay()
As always, you can use the Command Log to travel back in time, observing the button clicked. Notice the "Before / After" DOM snapshots the Test Runner shows when hovering over the "Click" command.