从v5到v6：React Router测试工具使用踩坑

在将项目从React Router v5升级到v6的过程中，测试环境的适配成为了一个不小的挑战。本文将分享在升级过程中遇到的主要问题及解决方案。

问题背景

v6版本移除了<Switch>组件，并引入了useRoutes钩子，这导致原有的测试代码需要大量重构。特别是使用Jest和React Testing Library进行单元测试时，路由相关的测试用例出现了大量报错。

核心问题

在测试中使用<MemoryRouter>时，发现无法正确渲染组件。通过调试发现，v6的路由匹配逻辑发生了变化，需要使用<Routes>替代原有的<Switch>。

复现步骤

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

it('应该正确渲染路由组件', () => {
  const { getByText } = render(
    <MemoryRouter initialEntries={['/about']}>
      <Switch>
        <Route path='/about' component={About} />
      </Switch>
    </MemoryRouter>
  );
});

解决方案

需要将代码调整为：

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

it('应该正确渲染路由组件', () => {
  const { getByText } = render(
    <MemoryRouter initialEntries={['/about']}>
      <Routes>
        <Route path='/about' element={<About />} />
      </Routes>
    </MemoryRouter>
  );
});