diff --git a/README.md b/README.md index 959a719f..404beba1 100644 --- a/README.md +++ b/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) diff --git a/cypress/component/advanced/react-router-v6/README.md b/cypress/component/advanced/react-router-v6/README.md new file mode 100644 index 00000000..303670b7 --- /dev/null +++ b/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) diff --git a/cypress/component/advanced/react-router-v6/images/in-memory.gif b/cypress/component/advanced/react-router-v6/images/in-memory.gif new file mode 100644 index 00000000..92353e09 Binary files /dev/null and b/cypress/component/advanced/react-router-v6/images/in-memory.gif differ diff --git a/cypress/component/advanced/react-router-v6/in-memory-spec.js b/cypress/component/advanced/react-router-v6/in-memory-spec.js new file mode 100644 index 00000000..545cc789 --- /dev/null +++ b/cypress/component/advanced/react-router-v6/in-memory-spec.js @@ -0,0 +1,42 @@ +/// +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( + + + , + ) + + // 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$/) + }) +}) diff --git a/cypress/component/advanced/react-router-v6/spec.js b/cypress/component/advanced/react-router-v6/spec.js index e5922f27..9b4d583e 100644 --- a/cypress/component/advanced/react-router-v6/spec.js +++ b/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 /// 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( - - - , - ) +describe('React Router', () => { + it('shows links', () => { + cy.viewport(600, 300) + mount( + + + , + ) - 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 + }) })