使用React Testing Library测试路由时遇嵌套Router错误

错误原因 #

你遇到的错误核心是整个React应用中只能存在一个Router实例：

• 测试用例通过<MemoryRouter>提供了路由上下文
• 而AppRoutes组件内部又嵌套了<BrowserRouter>

两者叠加导致出现重复Router的冲突。

解决方案 #

方案一（推荐）：重构AppRoutes，移除内部Router #

让AppRoutes只负责定义路由规则，把Router的外层包裹逻辑抽离到应用入口，这样测试时可以灵活使用MemoryRouter，生产环境用BrowserRouter。

修改后的AppRoutes.js：

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import App from './App'
import AboutMe from './AboutMe';

function AppRoutes() {
    return (
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="about" element={<AboutMe />} />
        </Routes>
    );
}

export default AppRoutes;

在应用入口（如index.js）中添加Router：

import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './AppRoutes';

ReactDOM.render(
  <Router>
    <AppRoutes />
  </Router>,
  document.getElementById('root')
);

测试用例无需修改，保持原写法即可：

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

test('renders App component when route is /', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <AppRoutes />
    </MemoryRouter>
  );

  const appComponent = screen.getByText(/This page is created using react/i);
  expect(appComponent).toBeInTheDocument();
});

方案二：测试时不额外包裹Router #

如果不想修改AppRoutes结构，测试时直接渲染AppRoutes即可，无需再套MemoryRouter：

import { render, screen } from '@testing-library/react';
import AppRoutes from './AppRoutes';

test('renders App component when route is /', () => {
  render(<AppRoutes />);

  const appComponent = screen.getByText(/This page is created using react/i);
  expect(appComponent).toBeInTheDocument();
});

这种方式的缺点是无法灵活测试不同路由（如/about），因为BrowserRouter依赖真实浏览器地址栏，测试环境中不好控制，因此更推荐方案一。

内容的提问来源于stack exchange，提问作者TwoThumbSticks