如何测试 React 路由 ？

前言

本文承接上文 如何测试 React 异步组件?何测[1]，这次我将继续使用 @testing-library/react[2] 来测试我们的何测 React 应用，并简要简要说明如何测试路由系统。何测

基本示例

以下代码使用 react-router V6版本，何测 V5 使用 Switch 包裹组件

通常我们的何测程序会写下如下代码：

首先我们有 2 个页面

src/routes/home.jsx 主页export default function Home() {

return (

这是主页

);

}src/routes/about.jsx 关于页面export default function Home() {

return (

这是关于页

);

}

然后使用 HashRouter 或者 BrowserRouter 包裹，形成我们的何测程序的主入口index.jsx

src/index.jsx 程序入口import { HashRouter, Routes, Route, Link } from "react-router-dom";

import Home from "./routes/home";

import About from "./routes/about";

const NoMatch = () =>

No Found;

function App() {

return (

主页

关于

} />

} />

);

}

export default App;

因为我们的页面足够简单，所以页面不会报错，何测那如果当页面变量的何测复杂，页面下的亿华云计算何测其中一个组件报错，就会引起白屏

例如 现在在 about 页面下添加一个错误组件

import React from "react";

function AboutContent() {

throw new Error("抛出一个测试错误");

}

export default function About() {

return (

这是何测关于页

);

}

此时页面就会报错，但如果我们没有点击 about 页面，何测我们的何测程序仍然正常运行，所以我们需要对路由进行测试。何测

测试方法

我们知道 @testing-library/react 是何测运行在 node 环境中的，但浏览器中并没有 HashRouter 或者 BrowserRouter ，何测所以我们需要一个用到 MemoryRouter

此时我们需要将原先的 index.jsx 拆分到app.jsx

src/index.jsx 入口import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

import { HashRouter } from "react-router-dom";

ReactDOM.render(

,

document.getElementById("root")

);src/app.jsximport { HashRouter, Routes, Route, Link } from "react-router-dom";

import Home from "./routes/home";

import About from "./routes/about";

const NoMatch = () =>

No Found;

function App() {

return (

主页

关于

} />

} />

);

}

export default App;

此时我们可以添加单元测试

import { render, screen } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

import { createMemoryHistory } from "history";

import React from "react";

import { Router } from "react-router-dom";

import App from "./App";

test("测试整个路由系统", () => {

render(

);

expect(screen.getByText(/这是主页/i)).toBeInTheDocument();

userEvent.click(screen.getByText(/关于/i));

expect(screen.getByText(/这是关于页/i)).toBeInTheDocument();

});

MemoryRouter[3] 有2个参数

第一个参数 initialEntries={ ["/users/mjackson"]} 配置初始化路由第二个参数 initialIndex 默认是 initialEntries 中的云服务器提供商最后一个值

测试 404 页面

test(测试路由未匹配, () => {

render(

,

)

expect(screen.getByText(/Not Found/i)).toBeInTheDocument()

})

通用测试

当页面有多个的时候，我们可以添加一个通用组件来确保每个页面都没有错误

import { useLocation } from "react-router-dom";

export const LocationDisplay = ({ children }) => {

const location = useLocation();

return (

<>

{ location.pathname}

{ children}

);

};

将 url 显示在页面上, 通过遍历确保每个页面可以正确渲染。

let routes = ["/", "/about"];

routes.forEach((route) => {

test(`确保 ${ route} 的 url 可以正确显示`, () => {

render(

);

expect(screen.getByText(new RegExp(route))).toBeInTheDocument();

});

});

小结

以下是路由测试的步骤:

将程序和使用什么路由分开;使用 MemoryRouter 来测试;通过 userEvent.click[4] 点击确保页面可以正确渲染;提供一个公共包裹组件，通过遍历来测试每个页面，确保渲染

以上就是本文的全部内容，那么如何测试 react hooks ?请关注我，我会尽快出 React test 系列的下文。

参考资料

[1]如何测试 React 异步组件?: https://juejin.cn/post/7046686808377131039

[2]@testing-library/react: https://testing-library.com/

[3]MemoryRouter: https://reactrouter.com/docs/en/v6/api#memoryrouter

[4]userEvent.click: url

很赞哦!（67）