测试含useLocation Hook的Header组件报错：需在Router上下文使用

排查以下几个大概率出现问题的点：

• MemoryRouter导入路径错误
  必须从react-router-dom导入MemoryRouter，而非react-router。后者的MemoryRouter不提供浏览器环境所需的路由上下文，正确导入代码如下：

  import { MemoryRouter } from 'react-router-dom';
  

• 测试包裹层级不对
  检查测试渲染代码，确保MemoryRouter是直接包裹Header的最外层父组件，不能嵌套在Header内部或其他组件里。正确写法示例：

  render(
    <MemoryRouter>
      <Header />
    </MemoryRouter>
  );
  

  要是把MemoryRouter放在Header的子组件层级里，Navigation组件根本拿不到路由上下文。

• Navigation被高阶组件隔离上下文
  如果Navigation用了React.memo或自定义高阶组件，可能导致路由上下文无法穿透。可以先去掉高阶组件测试，或者确保高阶组件正确传递上下文（比如用React.forwardRef）。

• 版本兼容问题
  若使用react-router-dom v6版本，别混用v5的写法。虽然v6里MemoryRouter用法基本一致，但版本不匹配也可能引发上下文丢失，可尝试切换到稳定版本再测试。

• 测试工具渲染方式问题
  用@testing-library/react的render函数时，别用其他会隔离上下文的包裹组件。比如同时用Redux的Provider时，要把MemoryRouter放在最外层，包裹所有Provider，保证路由上下文能传到内部组件。

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