v6路由单元测试实践

React Router v6 路由单元测试实践

React Router v6 的发布带来了许多重要变化，其中路由组件的渲染方式发生了重大改变。在进行单元测试时，需要特别注意这些变化。

测试环境配置

首先，确保安装了必要的测试依赖：

npm install --save-dev @testing-library/react @testing-library/jest-dom

路由组件测试示例

对于 v6 中的路由组件，我们需要使用 MemoryRouter 来模拟路由环境：

import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

it('renders home page', () => {
  renderWithRouter(
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
    </Routes>
  );
  
  expect(screen.getByText('Home Page')).toBeInTheDocument();
});

动态路由测试

对于动态路由参数，可以通过设置 initialEntries 来测试不同路径：

it('renders user page with id', () => {
  renderWithRouter(
    <Routes>
      <Route path='/user/:id' element={<User />} />
    </Routes>,
    ['/user/123']
  );
  
  expect(screen.getByText('User ID: 123')).toBeInTheDocument();
});

路由Hook测试

对于使用 useNavigate、useParams 等 Hook 的组件，可以使用 MemoryRouter 提供的上下文：

it('handles navigation correctly', () => {
  const TestComponent = () => {
    const navigate = useNavigate();
    return <button onClick={() => navigate('/about')}>Go to About</button>;
  };
  
  renderWithRouter(<TestComponent />);
  // 测试逻辑
});