Jest/RTL测试React Router v5路由未匹配生效问题

核心问题是路由上下文嵌套冲突：
你的Routing组件内部已经包裹了一层BrowserRouter，测试时又在组件外层套了一层传入memoryHistory的自定义Router。React Router v5 的路由上下文是就近生效的，内层BrowserRouter会创建独立的路由实例，完全感知不到外层测试Router传入的/bad/route路径，默认会以自身初始路径/做匹配，最终只会渲染首页相关内容，永远走不到404分支。
你之前验证history.location.pathname能拿到正确值，仅代表外层测试用的memoryHistory对象本身状态正确，内层的BrowserRouter根本没有读取这个history的内容。

方案1（推荐，符合组件可测试性设计规范） #

将路由容器和路由规则声明拆分，避免路由配置组件强绑定BrowserRouter：

1. 修改Routing组件，移除内部包裹的BrowserRouter，仅保留路由规则声明：

const Routing: React.FunctionComponent = () => {
  return (
    <>
      <Header/>
      <div className="App">
        <Switch>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route exact path={["/home", "/"]} component={Home} />
          <Route path="/account-details/:account?/:id" render={(props: RouteComponentProps<any>) => <AccountDetail {...props} />} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </>
  )
}
export default Routing;

2. 把BrowserRouter挪到项目最外层入口（通常是src/index.tsx挂载应用的位置）：

// 应用入口代码示例
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

3. 原有测试用例无需额外调整，即可正常匹配路由规则：

const accountQuery = new QueryClient()
it('Should test 404 route', async () => {
  const history = createMemoryHistory();
  history.push('/bad/route')
  render(
    <QueryClientProvider client={accountQuery}>
      <Router history={history}>
        <App />
      </Router>,
    </QueryClientProvider>
  )
  expect(await screen.findByText(/404 error/i)).toBeInTheDocument();
});

方案2（临时适配，不推荐长期使用） #

如果暂时不想调整生产代码结构，可以去掉测试时外层包裹的自定义Router，直接通过jsdom模拟的浏览器history API压入目标路径，让组件内部的BrowserRouter能读取到目标路径：

const accountQuery = new QueryClient()
it('Should test 404 route', async () => {
  // 直接压入错误路由到浏览器历史栈
  window.history.pushState({}, '', '/bad/route')
  render(
    <QueryClientProvider client={accountQuery}>
      <App />
    </QueryClientProvider>
  )
  expect(await screen.findByText(/404 error/i)).toBeInTheDocument();
});

这种方案灵活性差，后续做重定向、路由跳转类测试时会有很多限制，长期维护优先选方案1。

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