如何测试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.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;

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

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