前言

基本示例

以下代碼使用 react-router V6版本， V5 使用 Switch 包裹組件

創(chuàng)新互聯(lián)專注于堯都企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開(kāi)發(fā)。堯都網(wǎng)站建設(shè)公司,為堯都等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

通常我們的程序會(huì)寫(xiě)下如下代碼：

首先我們有 2 個(gè)頁(yè)面

• src/routes/home.jsx 主頁(yè)

export default function Home() {
    return (
      

        
這是主頁(yè)

      

    );
  }

• src/routes/about.jsx 關(guān)于頁(yè)面

export default function Home() {
    return (
      

        
這是關(guān)于頁(yè)

      

    );
  }

然后使用 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 (
    
      

        主頁(yè)
        關(guān)于
      

      
        } />
        } />
        } />
      
    
  );
}

export default App;

因?yàn)槲覀兊捻?yè)面足夠簡(jiǎn)單，所以頁(yè)面不會(huì)報(bào)錯(cuò)，那如果當(dāng)頁(yè)面變量的復(fù)雜，頁(yè)面下的其中一個(gè)組件報(bào)錯(cuò)，就會(huì)引起白屏

例如 現(xiàn)在在 about 頁(yè)面下添加一個(gè)錯(cuò)誤組件

import React from "react";

function AboutContent() {
  throw new Error("拋出一個(gè)測(cè)試錯(cuò)誤");
}

export default function About() {
  return (
    

      
這是關(guān)于頁(yè)

      
    

  );
}

此時(shí)頁(yè)面就會(huì)報(bào)錯(cuò)，但如果我們沒(méi)有點(diǎn)擊 about 頁(yè)面，我們的程序仍然正常運(yùn)行，所以我們需要對(duì)路由進(jìn)行測(cè)試。

測(cè)試方法

我們知道 @testing-library/react 是運(yùn)行在 node 環(huán)境中的，但瀏覽器中并沒(méi)有 HashRouter 或者 BrowserRouter ，所以我們需要一個(gè)用到 MemoryRouter

此時(shí)我們需要將原先的 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 (
    
      

        主頁(yè)
        關(guān)于
      

      
        } />
        } />
        } />
      
    
  );
}

export default App;

此時(shí)我們可以添加單元測(cè)試

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("測(cè)試整個(gè)路由系統(tǒng)", () => {
  render(
    
      
    
  );
  expect(screen.getByText(/這是主頁(yè)/i)).toBeInTheDocument();

  userEvent.click(screen.getByText(/關(guān)于/i));
  expect(screen.getByText(/這是關(guān)于頁(yè)/i)).toBeInTheDocument();
});

MemoryRouter[3] 有2個(gè)參數(shù)

• 第一個(gè)參數(shù) initialEntries={["/users/mjackson"]} 配置初始化路由
• 第二個(gè)參數(shù) initialIndex 默認(rèn)是 initialEntries 中的最后一個(gè)值

測(cè)試 404 頁(yè)面

test('測(cè)試路由未匹配', () => {
  render(
    
      
    ,
  )

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

通用測(cè)試

當(dāng)頁(yè)面有多個(gè)的時(shí)候，我們可以添加一個(gè)通用組件來(lái)確保每個(gè)頁(yè)面都沒(méi)有錯(cuò)誤

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

export const LocationDisplay = ({ children }) => {
  const location = useLocation();

  return (
    <>
      
{location.pathname}

      {children}
    
  );
};

將 url 顯示在頁(yè)面上, 通過(guò)遍歷確保每個(gè)頁(yè)面可以正確渲染。

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

routes.forEach((route) => {
  test(`確保 ${route} 的 url 可以正確顯示`, () => {
    render(
      
        
          
        
      
    );

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

小結(jié)

以下是路由測(cè)試的步驟:

• 將程序和使用什么路由分開(kāi);
• 使用 MemoryRouter 來(lái)測(cè)試;
• 通過(guò) userEvent.click[4] 點(diǎn)擊確保頁(yè)面可以正確渲染;
• 提供一個(gè)公共包裹組件，通過(guò)遍歷來(lái)測(cè)試每個(gè)頁(yè)面，確保渲染

以上就是本文的全部?jī)?nèi)容，那么如何測(cè)試 react hooks ?請(qǐng)關(guān)注我，我會(huì)盡快出 React test 系列的下文。

參考資料

[1]如何測(cè)試 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

網(wǎng)頁(yè)名稱：如何測(cè)試React路由？
標(biāo)題URL：http://uogjgqi.cn/article/djoshhg.html