chore: Add in-memory router example

README.md

@@ -172,7 +172,7 @@ Spec | Description
 [mocking-axios](cypress/component/advanced/mocking-axios) | Stubbing methods from a 3rd party component like `axios`
 [mocking-component](cypress/component/advanced/mocking-component) | Replaced a child component with dummy component during test
 [mocking-imports](cypress/component/advanced/mocking-imports) | Stub a named ES6 import in various situations
-[react-router-v6](cypress/component/advanced/react-router-v6) | Example testing a [React Router v6](https://github.com/ReactTraining/react-router)
+[react-router-v6](cypress/component/advanced/react-router-v6) | Example testing a [React Router v6](https://github.com/ReactTraining/react-router). Both browser and in memory routers
 [renderless](cypress/component/advanced/renderless) | Testing a component that does not need to render itself into the DOM
 [set-timeout-example](cypress/component/advanced/set-timeout-example) | Control the clock with `cy.tick` and test loading components that use `setTimeout`
 [test-retries](cypress/component/advanced/test-retries) | This component is compatible with [Cypress Test Retries](https://github.com/cypress-io/cypress/pull/3968)

cypress/component/advanced/react-router-v6/README.md

@@ -0,0 +1,8 @@
+# React Router v6
+
+We are testing the navigation in the [app.jsx](app.jsx) when it is surrounded by a React Router from [react-router-dom](https://github.com/ReactTraining/react-router#readme)
+
+- [spec.js](spec.js) uses `BrowserRouter`
+- [in-memory-spec.js](in-memory-spec.js) uses `MemoryRouter`
+
+![In memory router spec](images/in-memory.gif)

cypress/component/advanced/react-router-v6/in-memory-spec.js

@@ -0,0 +1,42 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import { App } from './app.jsx'
+import { MemoryRouter } from 'react-router-dom'
+
+describe('React Memory Router', () => {
+  it('navigates through the link without changing url', () => {
+    cy.viewport(600, 300)
+    mount(
+      <MemoryRouter
+        initialEntries={['/about', '/two', { pathname: '/three' }]}
+        initialIndex={0}
+      >
+        <App />
+      </MemoryRouter>,
+    )
+
+    // we are mocking the initial open route with `initialIndex`
+    // so we should see "About" component
+    cy.log('**About** component')
+    cy.contains('h2', 'About')
+    // because the routing is in memory, the URL stays at the spec filename
+    cy.location('pathname').should('match', /in-memory-spec.js$/)
+
+    // Go to home route
+    cy.contains('a', 'Home').click()
+
+    cy.log('**Home** component')
+    cy.contains('h2', 'Home') // from the "Home" component
+    // still at the spec url
+    cy.location('pathname').should('match', /in-memory-spec.js$/)
+
+    // Go to about route
+    cy.log('back to **About** component')
+    cy.contains('a', 'About').click()
+
+    cy.contains('h2', 'About')
+    // still at the spec url
+    cy.location('pathname').should('match', /in-memory-spec.js$/)
+  })
+})

cypress/component/advanced/react-router-v6/spec.js

@@ -1,26 +1,27 @@
-// example comes from https://github.com/ReactTraining/react-router/blob/dev/docs/guides/getting-started.md
 /// <reference types="cypress" />
 import React from 'react'
 import { mount } from 'cypress-react-unit-test'
 import { App } from './app.jsx'
 import { BrowserRouter as Router } from 'react-router-dom'
 
-it('shows links', () => {
-  cy.viewport(600, 300)
-  mount(
-    <Router>
-      <App />
-    </Router>,
-  )
+describe('React Router', () => {
+  it('shows links', () => {
+    cy.viewport(600, 300)
+    mount(
+      <Router>
+        <App />
+      </Router>,
+    )
 
-  cy.get('nav').should('be.visible')
-  cy.contains('Home')
-    .click()
-    .location('pathname')
-    .should('equal', '/') // Home route
-  cy.contains('h2', 'Home')
-  cy.contains('About')
-    .click()
-    .location('pathname')
-    .should('equal', '/about') // About route
+    cy.get('nav').should('be.visible')
+    cy.contains('Home')
+      .click()
+      .location('pathname')
+      .should('equal', '/') // Home route
+    cy.contains('h2', 'Home')
+    cy.contains('About')
+      .click()
+      .location('pathname')
+      .should('equal', '/about') // About route
+  })
 })