关于:
嘿,此刻,我正在尝试用jest和我的react组件的react测试库编写测试。我也使用react-router。
问题:
我想检查路径更改时是否在不与单个组件交互的情况下,应用程序是否路由到正确的组件。
因此,例如,如果当前路径名是“ / impressum”,那么我只想从Impressum页面获得快照。
我无法弄清楚如何将路径传递到,<App>
因此仅显示一条路线。
我要测试的组件:
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
我试过的
因此,我已经尝试实现以下示例:https : //testing-library.com/docs/example-react-router
我还尝试<App>
使用<MemoryRouter>
-> import'React-router'中的import {MemoryRouter}包装组件;并推送路线:https : //reacttraining.com/react-router/web/guides/testing
我还尝试使用from- > import {Router} from“ react-router-dom”包装<App>
组件<Router>
。并推动历史对象。
我的基本测试代码
在看到您用于测试的代码之后,我在测试时进行了一些更改,但是此基本部分始终存在。
describe("snapshot-test", () => {
it("renders component", () => {
const { asFragment } = render(
<App></App>
)
expect(asFragment()).toMatchSnapshot()
})
})
我刚刚找到了解决方案。
我必须模拟Router成为div并包含其子代代码。这可以通过以下方式进行:
您需要__mocks__/react-router-dom.js
包含以下代码的文件夹:
import React from 'react';
const reactRouterDom = require("react-router-dom")
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>
module.exports = reactRouterDom
现在,您可以使用MemoryRouter
来定义Route
应该指向的路径。
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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句