测试含Link/NavLink的React组件时出现basename解构错误

问题根源 #

测试环境中，Link/NavLink依赖React Router提供的上下文（Context），但测试代码未包裹路由上下文提供者，导致useContext返回null，进而解构basename失败。

解决方案 #

方法1：用MemoryRouter包裹测试组件 #

使用react-router-dom提供的MemoryRouter（适配无浏览器环境的测试）包裹Homepage组件，它会自动提供所需的路由上下文。

示例测试代码：

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

test('renders homepage correctly', () => {
  render(
    <MemoryRouter>
      <Homepage />
    </MemoryRouter>
  );
  // 后续断言逻辑
});

方法2：自定义路由上下文提供者（进阶） #

若需要更灵活的路由配置，可手动创建上下文提供者，模拟React Router的上下文值：

import { render } from '@testing-library/react';
import { RouterContext } from 'react-router-dom';
import Homepage from './Homepage';

test('renders homepage with custom router context', () => {
  render(
    <RouterContext.Provider value={{ basename: '', route: {}, staticContext: null }}>
      <Homepage />
    </RouterContext.Provider>
  );
  // 后续断言逻辑
});

注意：不同版本的react-router-dom，RouterContext的导出方式可能有差异，v6及以上版本建议优先使用MemoryRouter

常见误区排查 #

• 确认测试代码是否遗漏路由包裹：多数情况是直接渲染组件，未添加MemoryRouter/BrowserRouter
• 检查react-router-dom版本：v6版本中NavLink/Link的上下文依赖和v5略有不同，确保测试用路由组件与项目版本一致
• 单独测试Link组件时，同样需要包裹在路由上下文内

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