About:

Hey there, at the moment I am trying to write tests with jest and the react testing library for my react components. I also use react-router.

The Problem:

I want to check if the app routes to the right component when the path changes without interacting with the single components.

So for example, if the current pathname is /impressum I want to have a Snapshot from just the Impressum page.

I cannot figure out how to pass the path to <App> so that only one Route is displayed.

The component I am trying to test:

import React from 'react'

import { BrowserRouter as Router, Switch, Route } from react-router-dom



import WeatherPage from ../WeatherPage/WeatherPage.js

import AddWeatherPage from ../AddWeatherPage/AddWeatherPage.js

import WeatherDetailsPage from ../WeatherDetailsPage/WeatherDetailsPage.js

import DeleteWeatherPage from '../DeleteWeatherPage/DeleteWeatherPage.js'

import ImpressumPage from '../ImpressumPage/ImpressumPage.js'



class App extends React.Component {

  render() {

    return (

      <Router>

        <Switch>

          <Route path=/weatherDetails component={WeatherDetailsPage} />

          <Route path=/addWeather component={AddWeatherPage} />

          <Route path=/deleteWeather component={DeleteWeatherPage} />

          <Route path=/impressum component={ImpressumPage} />

          <Route path=/ component={WeatherPage} />

        </Switch>

      </Router>

    );

  }

}



export default App

What i tried:

1. So I already tried to implement the following example: https://testing-library.com/docs/example-react-router




2. I also tried to wrap the <App> component with <MemoryRouter> from -> import { MemoryRouter } from 'react-router'; and push the route: https://reacttraining.com/react-router/web/guides/testing




3. I also tried to wrap the <App> component with <Router> from -> import { Router } from react-router-dom; and push the history object.

My Basic Testing Code

Following you can see the code I use for testing, I made some changes while testing but this basic part remained all the time.

describe(snapshot-test, () => {

    it(renders component, () => {

        const { asFragment } = render(

            <App></App>

        )



        expect(asFragment()).toMatchSnapshot()

    })

})