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

近期团队完成了React Router从v5到v6的升级工作，在测试环境配置过程中遇到了不少问题，现将踩坑经验总结如下。

主要问题

1. 测试框架兼容性 升级后发现Jest测试无法正常运行，报错信息显示Router组件找不到。通过查阅文档发现v6版本移除了MemoryRouter的直接导出，需要使用createMemoryRouter。

// v5写法 - 已失效
import { MemoryRouter } from 'react-router-dom';

// v6写法 - 正确方式
import { createMemoryRouter, RouterProvider } from 'react-router-dom';

2. 测试用例重构 原有的路由测试代码需要全面重构，特别是shallow渲染方式不再适用。

// v5测试代码
it('should render home page', () => {
  const wrapper = shallow(
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  );
  expect(wrapper.find(HomePage)).toHaveLength(1);
});

// v6测试代码
it('should render home page', async () => {
  const router = createMemoryRouter(routes, {
    initialEntries: ['/']
  });
  
  render(
    <RouterProvider router={router} />
  );
  
  expect(screen.getByText('Home')).toBeInTheDocument();
});

3. Mock路由钩子 useNavigate和useLocation等钩子在测试中需要特别处理，建议使用vi.spyOn进行mock。