日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

建站
咨詢
售后

RELATEED CONSULTING

相關(guān)咨詢

選擇下列產(chǎn)品馬上在線溝通

服務(wù)時間：8:30-17:00

你可能遇到了下面的問題

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何測試React路由？

前言

基本示例

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

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

通常我們的程序會寫下如下代碼：

首先我們有 2 個頁面

src/routes/home.jsx 主頁

export default function Home() {
    return (
      
        這是主頁

      

    );
  }

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

export default function Home() {
    return (
      
        這是關(guān)于頁

      

    );
  }

然后使用 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 (
    
      
        主頁
        關(guān)于
      

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

export default App;

因為我們的頁面足夠簡單，所以頁面不會報錯，那如果當(dāng)頁面變量的復(fù)雜，頁面下的其中一個組件報錯，就會引起白屏

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

import React from "react";

function AboutContent() {
  throw new Error("拋出一個測試錯誤");
}

export default function About() {
  return (
    
      這是關(guān)于頁

      
    

  );
}

此時頁面就會報錯，但如果我們沒有點擊 about 頁面，我們的程序仍然正常運行，所以我們需要對路由進(jìn)行測試。

測試方法

我們知道 @testing-library/react 是運行在 node 環(huán)境中的，但瀏覽器中并沒有 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 (
    
      
        主頁
        關(guān)于
      

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

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

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

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

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

測試 404 頁面

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

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

通用測試

當(dāng)頁面有多個的時候，我們可以添加一個通用組件來確保每個頁面都沒有錯誤

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