升级React Router v7.6.2后，RTL测试无法复现Link组件的路由跳转行为

我明白你遇到的头疼问题了——实际运行的应用里，从Brother页面点击Link能正常跳转到Sister页面，但用React Testing Library（RTL）测试时就是复现不了这个逻辑，而且升级到React Router v7.6.2后才出现这个情况，之前v6一切正常。咱们来一步步拆解问题，找到解决办法。

问题根源分析 #

看你的测试代码，核心问题出在测试环境的路由配置和生产环境不一致：
你写的renderConnected函数只给MemoryRouter配置了一个通用Route，完全没有包含应用里的完整嵌套路由结构。React Router的路由系统需要在测试环境中拥有和生产环境一致的路由映射，不然点击Link后，测试里的路由系统找不到/siblings/sister对应的组件，自然不会渲染Sister页面。另外，React Router v7对测试时的路由上下文要求更严格，之前v6能“蒙混过关”的简化配置，v7里就不行了。

解决方案：对齐测试与生产环境的路由配置，修正测试逻辑 #

下面是具体的修改步骤，直接替换你的测试代码就能解决问题：

1. 重构测试用的路由包裹组件

创建一个和应用路由完全对齐的测试包裹器，确保测试环境的路由系统能识别所有路径：

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { MemoryRouter, Routes, Route, Navigate } from 'react-router-dom';
import '@testing-library/jest-dom';
import { Brother, Sister } from './App';

// 完全对齐应用的路由结构，确保测试环境路由和生产一致
const renderWithRouter = (initialPath = '/siblings/brother') => {
  return render(
    <MemoryRouter initialEntries={[initialPath]}>
      <Routes>
        <Route path="/siblings/*">
          <Route path="*" element={<Navigate to="brother" />} />
          <Route path="brother" element={<Brother />} />
          <Route path="sister" element={<Sister />} />
        </Route>
      </Routes>
    </MemoryRouter>
  );
};

2. 修正测试逻辑，使用RTL推荐的交互方式

用userEvent（贴近真实用户交互，RTL官方推荐）替代fireEvent，并确保异步操作的正确等待：

test('should navigate from Brother to Sister when link is clicked', async () => {
  // 初始化测试环境，默认进入Brother页面
  renderWithRouter();
  
  // 确认Brother组件的Link已渲染
  const brotherLink = screen.getByRole('link', { name: /i am a brother/i });
  expect(brotherLink).toBeInTheDocument();

  // 模拟真实用户点击Link（注意要await，因为userEvent是异步操作）
  const user = userEvent.setup();
  await user.click(brotherLink);

  // 等待路由跳转完成，断言Sister组件渲染
  await waitFor(() => {
    expect(screen.getByText('i am a sister')).toBeInTheDocument();
  });
});

关键修改点说明 #

1. 路由配置对齐：测试里的MemoryRouter完全复用了应用的嵌套路由结构，确保/siblings/sister路径能正确匹配到Sister组件。
2. 使用userEvent：替代fireEvent，模拟真实用户的点击流程（包括事件冒泡、默认行为触发等），RTL官方明确推荐优先使用userEvent。
3. 正确的初始路径：initialEntries设置为实际的/siblings/brother，而不是带通配符的路径，符合React Router v7对MemoryRouter的使用要求。
4. 异步等待：用waitFor包裹断言，确保路由跳转和组件渲染完成后再做判断，避免异步操作导致的断言失败。

验证修改结果 #

在StackBlitz的终端里重新运行yarn test，这个测试应该就能通过了。如果还有问题，可以检查一下@testing-library/react的版本是否和React Router v7兼容（你的是v16.3.0，理论上没问题，但如果有冲突可以尝试升级到最新稳定版）。

内容来源于stack exchange