https://github.com/bahmutov/test-react-router-v5

Component tests for apps that use React Router v5
https://github.com/bahmutov/test-react-router-v5

cypress-react-unit-test-example

Last synced: 4 months ago
JSON representation

Component tests for apps that use React Router v5

• Host: GitHub
• URL: https://github.com/bahmutov/test-react-router-v5
• Owner: bahmutov
• Created: 2020-04-09T02:14:56.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-12-17T20:27:26.000Z (5 months ago)
• Last Synced: 2024-12-27T20:11:22.447Z (5 months ago)
• Topics: cypress-react-unit-test-example
• Language: JavaScript
• Size: 397 KB
• Stars: 2
• Watchers: 1
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# test-react-router-v5

> Component tests for apps that use [React Router v5](https://reacttraining.com/react-router/web/guides/quick-start)

![cypress version](https://img.shields.io/badge/cypress-5.6.0-brightgreen) ![cypress-react-unit-test version](https://img.shields.io/badge/cypress--react--unit--test-4.17.2-brightgreen)

Uses [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)

- [src/App.spec.js](src/App.spec.js) shows basic routing

- [src/Nesting.spec.js](src/Nesting.spec.js) shows two level of routing

- [src/Auth.spec.js](src/Auth.spec.js) takes protected routes for a spin

- [src/RouteConfig.spec.js](src/RouteConfig.spec.js) passes the list of routes from the test to the component to render

![Route config test](images/route-config.png)

## Common problems

  Cannot read property 'location' of undefined

  If the test fails with this error from `useContext(Context).location` line, you have probably forgotten to surround the mounted route with the `BrowserRouter` component.

```js

import { BrowserRouter } from 'react-router-dom'

// then in the test mount the component the same way

// as you would in the "normal" mini web application

// AuthenticatedRoute and NewNote are user code we want to test

mount(

  

    

      

    

  

)

```

See [cypress-react-unit-test#388](https://github.com/bahmutov/cypress-react-unit-test/issues/388) for example

  Cannot read property '...' of null

  If the components inside the route rely on a context, surround the routes with appropriate context provider.

```js

// AuthenticatedRoute.js

export default function AuthenticatedRoute({ children, ...rest }) {

  const { isAuthenticated } = useAppContext();

  ...

}

// test file

mount(

  

    

      ...

    

  

)

```

See [cypress-react-unit-test#388](https://github.com/bahmutov/cypress-react-unit-test/issues/388) for example