React <App />处于URL子路径，testing-library路由匹配失败如何修复？

你的问题出在测试时默认渲染的路径是根路径/，但应用里所有路由都挂载在/some-path下，导致路由匹配失败。这里有几种实用的解决方式：

方法一：用MemoryRouter指定初始路径 #

在测试时把<App>包裹在react-router-dom提供的MemoryRouter组件中，通过initialEntries指定初始访问路径为你的BASE_PATH：

import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';
import { BASE_PATH } from './some/place';

test('渲染App组件', () => {
  render(
    <MemoryRouter initialEntries={[BASE_PATH]}>
      <App />
    </MemoryRouter>
  );
  // 这里可以继续写你的断言逻辑
});

如果需要测试/some-path下的子路由，比如/some-path/detail，只需要把initialEntries改成[${BASE_PATH}/detail]即可。

方法二：Mock BASE_PATH为根路径 #

如果只是想快速让路由匹配根路径，无需模拟子路径场景，可以用Jest的mock功能覆盖BASE_PATH的值：

import { render } from '@testing-library/react';
import App from './App';

// 提前mock BASE_PATH为根路径
jest.mock('./some/place', () => ({
  BASE_PATH: '/'
}));

test('渲染App组件', () => {
  render(<App />);
  // 测试逻辑
});

这种方式适合不需要测试路由跳转逻辑，只需要验证组件渲染的场景。

方法三：添加根路径重定向 #

如果希望应用在根路径也能正常匹配路由，可以在路由配置里加一个重定向规则，把根路径指向BASE_PATH：

import { Routes, Route, Navigate } from 'react-router-dom';
import { BASE_PATH } from './some/place';

// 路由配置里添加
<Routes>
  <Route path="/" element={<Navigate to={BASE_PATH} replace />} />
  <Route path={`${BASE_PATH}/*`} element={<SomeComponent />} />
</Routes>

这样测试时渲染<App>，根路径会自动跳转到/some-path，也就不会出现路由匹配失败的问题了。

内容的提问来源于stack exchange，提问作者Joseph Beuys' Mum