React+TypeScript项目Navbar页面跳转测试失败求助

我在测试Vite构建的React+TypeScript项目的导航栏时，已经验证了导航链接存在，但点击Home、Favorites、Location链接后，无法获取对应页面的文本。相关代码如下：

页面组件 #

Home组件 #

export function Home() {
    return <h1>Hello</h1>
}

Favorites组件 #

export function Favorites() {
    return <h1>This is favorites</h1>
}

Location组件 #

export function Location() {
    return <h1>This is the Location page</h1>
}

导航栏组件 #

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

import "./navbar.css";

// 创建并导出供应用使用的导航栏
export function NavBar() {
  return (
    <nav className="navbar-container">
      <Link to="/">Home</Link>
      <Link to="/favorites">Favorites</Link>
      <Link to="/location">Location</Link>
    </nav>
  );
}

App.tsx #

import { useState } from 'react'
import './App.css'
import { Route, Routes } from 'react-router-dom'
import { NavBar } from './navbar'
import { Home } from './Home'
import { Favorites } from './Favorites'
import { Location } from './Location'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
    <NavBar />
    <div>
        <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/favorites" element={<Favorites />}></Route>
            <Route path="/location" element={<Location />}></Route>
        </Routes>
    </div>
    
    </>
  )
}

export default App

测试文件 #

import { fireEvent, render, screen } from "@testing-library/react";
import { NavBar } from "../../navbar";
import { BrowserRouter } from "react-router-dom";
import { it, expect } from "vitest";

it("NavBar renders without errors", () => {
    render(
      <BrowserRouter>
        <NavBar />
      </BrowserRouter>
    );
  });
  
it("NavBar contains navigation links", () => {
    const { getByText } = render(
      <BrowserRouter>
        <NavBar />
      </BrowserRouter>
    );
    expect(getByText("Home")).toBeInTheDocument();
    expect(getByText("Favorites")).toBeInTheDocument();
    expect(getByText("Location")).toBeInTheDocument();
  });

// 无法正常工作，求助。测试并确保导航栏链接可正常跳转
describe("NavBar", () => {
    it("navigates to Home when Home link is clicked", () => {
      render(
        <BrowserRouter>
          <NavBar />
        </BrowserRouter>
      );
      const homeLink = screen.getByText("Home");
      fireEvent.click(homeLink);
      expect(screen.getByText("Hello")).toBeInTheDocument();
    });
  
    it("navigates to Favorites when Favorites link is clicked", () => {
      render(
        <BrowserRouter>
          <NavBar />
        </BrowserRouter>
      );
      const favoritesLink = screen.getByText("Favorites");
      fireEvent.click(favoritesLink);
      expect(screen.getByText("This is favorites")).toBeInTheDocument();
    });
  
    it("navigates to Location when Location link is clicked", () => {
      render(
        <BrowserRouter>
          <NavBar />
        </BrowserRouter>
      );
      const locationLink = screen.getByText("Location");
      fireEvent.click(locationLink);
      expect(screen.getByText("This is the Location page")).toBeInTheDocument();
    });
});

问题原因与解决方法 #

你的测试代码只渲染了NavBar组件，没有包含完整的路由配置和页面组件，点击链接后路由没有对应的页面可以渲染，因此无法获取页面文本。

修改测试代码，渲染完整的App组件而非单独的NavBar：

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

// 保留原有两个测试...

describe("NavBar", () => {
    it("navigates to Home when Home link is clicked", () => {
      render(
        <BrowserRouter>
          <App />
        </BrowserRouter>
      );
      // 先跳转到其他页面，再测试返回Home的逻辑
      const favoritesLink = screen.getByText("Favorites");
      fireEvent.click(favoritesLink);
      const homeLink = screen.getByText("Home");
      fireEvent.click(homeLink);
      expect(screen.getByText("Hello")).toBeInTheDocument();
    });
  
    it("navigates to Favorites when Favorites link is clicked", () => {
      render(
        <BrowserRouter>
          <App />
        </BrowserRouter>
      );
      const favoritesLink = screen.getByText("Favorites");
      fireEvent.click(favoritesLink);
      expect(screen.getByText("This is favorites")).toBeInTheDocument();
    });
  
    it("navigates to Location when Location link is clicked", () => {
      render(
        <BrowserRouter>
          <App />
        </BrowserRouter>
      );
      const locationLink = screen.getByText("Location");
      fireEvent.click(locationLink);
      expect(screen.getByText("This is the Location page")).toBeInTheDocument();
    });
});

注：测试Home跳转时，初始页面已经是Home，先跳转到其他页面再返回Home，测试逻辑更严谨。

内容的提问来源于stack exchange，提问作者EconNoob