从v5到v6：React Router测试用例重构踩坑

React Router v6的发布带来了许多重大变更，其中最显著的是路由组件的重新设计和API的简化。在升级过程中，我们遇到了多个测试用例需要重构的问题。

核心问题一：Route组件重构

在v5中，我们使用<Route path="..." component={Component} />的方式，而在v6中，需要改为<Route path="..." element={<Component />} />。这意味着所有测试用例中的路由配置都需要相应调整。

核心问题二：useHistory Hook替换

v5中的useHistory()在v6中被useNavigate()替代。在测试环境中，我们需要将const history = useHistory();修改为const navigate = useNavigate();，并更新所有调用方式。

核心问题三：测试环境配置

为了正确测试路由功能，需要在测试文件中添加以下配置：

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

const customRender = (ui, options) => {
  return render(ui, {
    wrapper: ({ children }) => (
      <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
    ),
    ...options
  });
};

实际测试代码示例

it('should navigate correctly', () => {
  const { getByText } = customRender(<App />);
  fireEvent.click(getByText('Go to About'));
  expect(screen.getByText('About Page')).toBeInTheDocument();
});

这些重构工作虽然繁琐，但确保了应用在新版本中的稳定运行。