react-router-dom v6重定向测试未生效，如何编写正确测试用例？

问题场景 #

我有一个React页面组件：

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

export const App: React.FC<{router: any}> = ({router}) => {
  return (
    <div className="flex flex-col h-full">
    <div className="h-1/8 text-center border-brand-primary border-2">Nav bar with login goes here</div>
    <div className="h-1/8 text-center border-brand-primary border-2">Pathways overview data goes here</div>
    <div className="flex-auto">
      <RouterProvider router={router} fallbackElement={<PageNotFound />} />
    </div>
    <div className="mt-64">
      <Footer/>
    </div>
  </div>
  );
}

路由配置如下：

const routes = [
        ...Routes,
        {
          path: "*",
          element: <Navigate to="/thing/123" replace />
        }
      ]

我尝试用Jest测试验证重定向功能，测试代码：

import { render, screen, waitFor } from "@testing-library/react";
import React from "react";
import { createMemoryRouter } from "react-router-dom";

...

test('root sends redirect', async () => {
        const router = createMemoryRouter(routes);
        render(<App router={router} />);
        await waitFor(() => {
          expect(router.state.location.pathname).toEqual('/thing/123');
        }, {timeout: 5000});
      });

实际环境中重定向功能正常，但测试里从未触发，v4、v5的示例都不适用于v6，请问哪里出错了？

问题原因与修复 #

问题出在createMemoryRouter的使用逻辑上：你没有指定初始导航的路径，默认情况下它不会自动触发对根路径/的导航，自然不会匹配到*路由的重定向规则。

修复方案 #

1. 创建MemoryRouter时，通过initialEntries指定初始访问路径，比如要测试根路径重定向就传入["/"]
2. 使用React Router v6提供的waitForRouterReady替代单纯的waitFor，更可靠地等待路由初始化完成

修改后的测试代码：

import { render, screen } from "@testing-library/react";
import React from "react";
import { createMemoryRouter, waitForRouterReady } from "react-router-dom";

test('root sends redirect', async () => {
  const router = createMemoryRouter(routes, {
    initialEntries: ["/"], // 指定初始访问的路径
  });
  
  render(<App router={router} />);
  
  await waitForRouterReady(router); // 等待路由完成初始导航（含重定向）
  
  expect(router.state.location.pathname).toEqual('/thing/123');
});

额外说明 #

• initialEntries是createMemoryRouter配置对象的属性，用来模拟浏览器历史记录栈，定义初始访问路径
• 如果需要测试404路径的重定向，只需把initialEntries改成不存在的路径，比如["/invalid-path"]
• waitForRouterReady会等待路由完成所有初始导航流程，确保断言时路由状态已经稳定

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