使用Testing Library测试React路由跳转不符合预期

你的测试代码存在两个核心问题，导致无法获取到购物车页面的元素：

1. 仅渲染Header组件，缺少路由对应的购物车页面配置：测试只渲染了Header组件，但没有设置React Router的路由规则和对应的Cart页面组件，点击跳转后页面没有实际内容，自然找不到Shopping Cart文本元素。
2. 测试断言逻辑不严谨：使用queryByText找不到元素时会返回null，但你没有在waitFor中添加断言，仅通过打印日志无法验证跳转是否成功。

修改后的测试代码 #

import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter, Routes, Route } from "react-router-dom";
import { describe, expect, it } from "vitest";
import { renderWithProviders } from "./../../../utils/utils-for-tests";
import Header from "./Header";
// 导入你的购物车页面组件
import Cart from "../Cart/Cart";

describe("header component", () => {
  it("should redirect to cart page on click of cart button", async () => {
    await renderWithProviders(
      <MemoryRouter initialEntries={["/"]}>
        {/* 配置完整路由 */}
        <Header />
        <Routes>
          <Route path="/cart" element={<Cart />} />
          {/* 可添加其他必要路由，比如首页 */}
        </Routes>
      </MemoryRouter>
    );
    const user = userEvent.setup();
    const cartIcon = screen.getByText(/Cart/);
    expect(cartIcon).toBeInTheDocument();
    
    await user.click(cartIcon);
    
    // 使用waitFor配合getByText断言元素存在
    await waitFor(() => {
      expect(screen.getByText(/Shopping Cart/i)).toBeInTheDocument();
    });
  });
});

关键修改点说明 #

• 添加路由配置：用Routes和Route定义购物车页面的路由规则，确保跳转后对应的组件能被渲染。
• 使用MemoryRouter：测试环境推荐用MemoryRouter，它不会修改浏览器实际URL，更适合测试场景，initialEntries设置初始路由为首页。
• 替换queryByText为getByText：getByText找不到元素时会抛出错误，配合waitFor可正确等待元素出现；而queryByText仅返回null，无法触发waitFor的重试逻辑。
• 添加断言：在waitFor中直接断言购物车页面元素存在，完成测试验证。

如果项目中已有全局路由配置，也可以直接渲染整个App组件而非单独的Header，测试场景会更接近真实环境。

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