如何使用 <Router> 测试组件标签里面呢? [英] How to test a component with the <Router> tag inside of it?

问题描述

关于:

嘿，目前我正在尝试使用 jest 和 react 测试库为我的 react 组件编写测试.我也使用反应路由器.

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.

问题:

我想在路径改变时检查应用程序是否路由到正确的组件，而不与单个组件交互.

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

例如，如果当前路径名是/impressum"，我只想从 Impressum 页面获取快照.

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

我不知道如何将路径传递给 以便只显示一个 Route.

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

我要测试的组件:

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

我尝试了什么:

1. 所以我已经尝试实现以下示例:https://testing-library.com/docs/example-react-router

我还尝试用 from -> import { MemoryRouter } from 'react-router' 包装 组件；并推送路线:https://reacttraining.com/react-router/web/guides/测试

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

我还尝试将 组件与 from -> import { Router } from "react-router-dom";并推送历史对象.

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

我的基本测试代码

接下来你可以看到我用于测试的代码，我在测试时做了一些更改，但这个基本部分一直保持不变.

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()
    })
})

推荐答案

我刚刚找到了一个解决方案.

I just found a solution.

我不得不将 Router 模拟为一个 div 并包含其子代码.其工作方式如下:

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

您需要包含以下代码的文件夹 __mocks__/react-router-dom.js:

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

现在您可以使用 MemoryRouter 来定义 Route 应该指向的路径.

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

App.test.js:

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 component with following path '/impressum'", () => {
        const { getByTestId } = render(
            <MemoryRouter initialEntries={['/impressum']}>
                <App></App>
            </MemoryRouter>
        )

        let impressumPage = getByTestId("impressum-page")

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

另请访问以下链接，我从那里得到了解决方案.https://medium.com/@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303

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

这篇关于如何使用 <Router> 测试组件标签里面呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！