javascript - How to test a component with the <Router> tag inside of it? - Stack Overflow

admin管理员组

文章数量:1318774

About:

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

The Problem:

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

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 ponent 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" ponent={WeatherDetailsPage} />
          <Route path="/addWeather" ponent={AddWeatherPage} />
          <Route path="/deleteWeather" ponent={DeleteWeatherPage} />
          <Route path="/impressum" ponent={ImpressumPage} />
          <Route path="/" ponent={WeatherPage} />
        </Switch>
      </Router>
    );
  }
}

export default App

What i tried:

1. So I already tried to implement the following example:

2. I also tried to wrap the <App> ponent with <MemoryRouter> from -> import { MemoryRouter } from 'react-router'; and push the route:

3. I also tried to wrap the <App> ponent 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 ponent", () => {
        const { asFragment } = render(
            <App></App>
        )

        expect(asFragment()).toMatchSnapshot()
    })
})

About:

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

The Problem:

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

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 ponent 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" ponent={WeatherDetailsPage} />
          <Route path="/addWeather" ponent={AddWeatherPage} />
          <Route path="/deleteWeather" ponent={DeleteWeatherPage} />
          <Route path="/impressum" ponent={ImpressumPage} />
          <Route path="/" ponent={WeatherPage} />
        </Switch>
      </Router>
    );
  }
}

export default App

What i tried:

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

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

3. I also tried to wrap the <App> ponent 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 ponent", () => {
        const { asFragment } = render(
            <App></App>
        )

        expect(asFragment()).toMatchSnapshot()
    })
})

• javascript
• reactjs
• react-router
• react-testing-library

Share Improve this question Follow asked May 20, 2020 at 13:10 Benjamin LichtensteinBenjamin Lichtenstein 11811 silver badge1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I just found a solution.

I had to mock Router to be a div and contains its children code. This works the following way:

You need the folder __mocks__/react-router-dom.js which contains the following code:

import React from 'react';

const reactRouterDom = require("react-router-dom")
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>

module.exports = reactRouterDom

Now you can use the MemoryRouter to define the path which the Route should point to.

App.test.js:

import React from "react";
import { render } from "@testing-library/react";
import { MemoryRouter } from 'react-router-dom';
import App from './App';


describe("unit-test", () => {
    it("renders the right ponent with following path '/impressum'", () => {
        const { getByTestId } = render(
            <MemoryRouter initialEntries={['/impressum']}>
                <App></App>
            </MemoryRouter>
        )

        let impressumPage = getByTestId("impressum-page")

        expect(impressumPage).toBeInTheDocument()
    })
})

Also visit the following link, I got the solution from there. https://medium./@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303

I think you need to put exact before the path of the '/' like this

<Switch>
      <Route path="/weatherDetails" ponent={WeatherDetailsPage} />
      <Route path="/addWeather" ponent={AddWeatherPage} />
      <Route path="/deleteWeather" ponent={DeleteWeatherPage} />
      <Route path="/impressum" ponent={ImpressumPage} />
      <Route exact path="/" ponent={WeatherPage} />
</Switch>

like this is mean that only if you have this path="/" the WeatherPage show i you add to it like path="/impressum" you will see only ImpressumPage. hope it help you :)

本文标签： javascriptHow to test a component with the ltRoutergt tag inside of itStack Overflow