React Router v6 createMemoryRouter测试Outlet未渲染问题求助

云原生阿岚

2026-8-4

问题原因及解决方案

核心问题1：initialIndex设置错误

测试代码里的initialIndex: 1是错误的——initialEntries: ['/']是长度为1的数组，索引从0开始，设置initialIndex:1会让路由处于不存在的条目位置，导致子路由无法被正确匹配，Outlet也就不会渲染Home组件。

核心问题2：未等待懒加载组件完成渲染

Home组件通过lazy懒加载，测试时需要等待Suspense完成组件加载渲染，否则debug时组件可能还未加载完毕，导致main标签为空。

修改后的测试代码

it('should navigate to Home', async () => {
  const router = createMemoryRouter(routes, {
    initialEntries: ['/'],
    // 移除错误的initialIndex，默认值0即可匹配唯一的路由条目
  });

  const { debug, findByText } = render(
    <RouterProvider router={router} />
  );

  // 等待Home组件加载并渲染出目标文本
  await findByText('Home page');
  
  debug(undefined, Infinity);
});