从v5到v6：React Router测试工具踩坑分析

React Router v6的升级带来了许多改进，但同时也带来了一些测试工具的兼容性问题。本文将详细分析从v5到v6升级过程中遇到的测试工具踩坑情况。

升级后的主要变化

v6版本移除了Switch组件，改用Routes，并且路由配置方式发生了根本性改变。在进行测试时，我们发现原有的memory-router和react-router-dom/test-utils等工具无法直接兼容新版本。

常见问题与解决方案

1. MemoryRouter不兼容问题

// ❌ v5写法
import { MemoryRouter } from 'react-router-dom';

// ✅ v6写法
import { MemoryRouter } from 'react-router-dom';
// 需要使用新API
const TestComponent = () => (
  <MemoryRouter initialEntries={['/home']}>
    <App />
  </MemoryRouter>
);

2. 测试渲染问题

// ❌ v5测试写法
render(<BrowserRouter><App /></BrowserRouter>);

// ✅ v6测试写法
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

const renderWithRouter = (component, { initialEntries = ['/'] } = {}) => {
  return render(
    <MemoryRouter initialEntries={initialEntries}>
      {component}
    </MemoryRouter>
  );
};