React Router v6 的自动测试

1 年 ago

清, 扬

3 minutes

首先

本文将介绍如何使用React Router来实现Web应用程序的自动化测试。

前提 tí)

开发环境如下所示。

jsdom 21.1.0

而且，我们也做了以下的准备工作。

在Vitest中进行配置，以使用React Testing Library

※请参阅各自的独立文章以了解更多详细信息。

默认路由的测试 de

我们要测试使用Route进行应用程序启动时的默认路由。

应用程序的实现

首先，我们用 BrowserRouter 包裹 App 组件，以便能够进行路由设置。

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

下面是一种方式来实现，在根目录（”/”）访问时打开 Home 组件。

export const Home = () => {
  return <div>You are home</div>;
};

import { Route, Routes } from "react-router-dom";
import { Home } from "./pages/Home";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

export default App;

考试的实施

渲染App组件，并测试是否显示”你已回家”（测试应用启动时是否打开Home组件）。

import { render, screen } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import { describe, test } from "vitest";
import App from "../../App";

describe("App routing", () => {
  test("default root", () => {
    render(<App />, { wrapper: BrowserRouter });

    // verify page content for default route
    expect(screen.getByText(/you are home/i)).toBeInTheDocument();
  });
});

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

链接测试 de

我希望通过点击链接来测试在页面上使用 Link 时的页面转换。

应用程序的实现

首先，我们创建一个名为 About 的组件作为目标页面，并将其添加到路由中。

export const About = () => {
  return <div>You are on the about page</div>;
};

import { Route, Routes } from "react-router-dom";
import { About } from "./pages/About";
import { Home } from "./pages/Home";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

在主页上，当点击链接时，将会跳转到关于页面。

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

export const Home = () => {
  return (
    <div>
      <div>You are home</div>
      <Link to="/about">About</Link>
    </div>
  );
};

考试的实施

渲染App组件后，点击链接，然后测试页面上是否显示“你正在关于页面”。

test("link", async () => {
  render(<App />, { wrapper: BrowserRouter });
  const user = userEvent.setup();

  // verify page content for expected route after navigating
  await user.click(screen.getByRole("link"));
  expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
});

如果页面上只有一个链接，上述的写法是没有问题的。但如果有多个链接，则会出现错误。

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

export const Home = () => {
  return (
    <div>
      <div>You are home</div>
      <Link to="/about">About</Link>
      <br />
      <Link to="/form">Form</Link>
    </div>
  );
};

可以采取多种解决方法，例如，通过在第二个参数中添加“name”来指定点击目标链接（关于）。

Alternative:
虽然有多种解决方案，但例如可以通过在第二个参数中添加“name”来确定点击目标链接（关于）。

test("navigate from root to about by clicking link", async () => {
  render(<App />, { wrapper: BrowserRouter });
  const user = userEvent.setup();

  // verify page content for expected route after navigating
  await user.click(screen.getByRole("link"), { name: "About" });
  expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
});

重定向测试

我们将使用Navigate进行重定向测试。

应用程序的实施

指定当根目录（”/”）访问时，将重定向至 “/home”。

import { Navigate, Route, Routes } from "react-router-dom";
import { About } from "./pages/About";
import { Home } from "./pages/Home";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/home" />} />
      <Route path="/home" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

考试的执行

渲染完 App 组件后，请确认路径已更改为 “/home”。
首先，为了测试路径确认，请创建一个用于路径确认的组件。

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

export const LOCATION_DISPLAY = "location-display";

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

  return <div data-testid={LOCATION_DISPLAY}>{location.pathname}</div>;
};

接下来，在测试代码中渲染用于确认路径的组件，并测试该组件的路径是否为 “/home”。

test("default root", () => {
  render(
    <>
      <App />
      <LocationDisplay />
    </>,
    { wrapper: BrowserRouter }
  );

  // verify page content for default route
  expect(screen.getByText(/you are home/i)).toBeInTheDocument();

  // verify page path redirected from root to home
  expect(screen.getByTestId(LOCATION_DISPLAY)).toHaveTextContent("/home");
});

最终

我們使用 React Router 的 Route、Link、Navigate 來實現了網頁應用的自動測試。由於 React Router 還有很多其他功能，所以我們將來還想確認能否繼續實現自動測試。

请提供详细背景信息，以便我能够适当地以中文来修改。

Router v6.10.0 | React Router