v6升级后测试覆盖

React Router v6相较于v5在API设计上进行了重大重构，升级后的测试覆盖需要针对性调整。本文将详细阐述v6版本的测试策略和具体实现方法。

升级后的主要变化

v6版本移除了Switch组件，改用Routes组件，并且路由配置方式发生改变。此外，useHistory、useRouteMatch等API被废弃，需要使用新的useNavigate、useLocation等钩子。

测试策略调整

1. 路由测试覆盖

// 测试路由配置
import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';

test('should render home page', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </MemoryRouter>
  );
  
  expect(screen.getByText('Home')).toBeInTheDocument();
});

2. 导航测试

// 测试导航功能
import { fireEvent } from '@testing-library/react';

test('should navigate to about page', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  );
  
  fireEvent.click(screen.getByText('About'));
  expect(screen.getByText('About Page')).toBeInTheDocument();
});

3. 参数路由测试

// 测试参数路由
import { useParams } from 'react-router-dom';

test('should handle params', () => {
  render(
    <MemoryRouter initialEntries={['/user/123']}>
      <Routes>
        <Route path="/user/:id" element={<UserPage />} />
      </Routes>
    </MemoryRouter>
  );
  
  expect(screen.getByText('User ID: 123')).toBeInTheDocument();
});