从v5到v6：React Router测试环境配置踩坑

最近在将项目从React Router v5升级到v6的过程中，遇到了不少测试环境配置的坑，特此记录。

问题背景

在升级过程中，发现测试环境中路由相关组件无法正常渲染。经过排查，主要问题出现在MemoryRouter和render方法的使用上。

具体踩坑过程

1. 测试环境配置错误 在v5中使用的测试配置：

import { MemoryRouter } from 'react-router-dom';
import { render } from '@testing-library/react';

render(
  <MemoryRouter initialEntries={['/home']}>
    <App />
  </MemoryRouter>
);

升级到v6后，发现MemoryRouter的使用方式发生了变化。正确的做法应该是：

import { MemoryRouter } from 'react-router-dom';
import { render } from '@testing-library/react';

render(
  <MemoryRouter initialEntries={['/home']}>
    <App />
  </MemoryRouter>
);

2. 测试用例中的路由组件渲染问题 在v6中，Route组件必须包裹在Routes组件内。如果测试代码中直接使用了Route，会导致组件不渲染：

// ❌ 错误写法
render(
  <MemoryRouter>
    <Route path="/home">Home</Route>
  </MemoryRouter>
);

// ✅ 正确写法
render(
  <MemoryRouter>
    <Routes>
      <Route path="/home">Home</Route>
    </Routes>
  </MemoryRouter>
);