React Testing Library测试含<Link>组件报错：无法解构'basename'

这个错误的核心是测试环境中没有为组件提供React Router的上下文。虽然你在index.js里用<Router>包裹了整个应用，但单元测试是单独渲染HomepageVideos（或其上层嵌套组件），此时组件树里没有Router提供的路由上下文，<Link>组件依赖的上下文对象为null，解构basename时自然就会报错。

下面是几种可行的解决方法：

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

React Router专门提供了MemoryRouter用于测试场景，它会在内存中模拟路由环境，不需要依赖真实的浏览器历史。

示例代码（以Jest+React Testing Library为例）：

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

test('渲染HomepageVideos组件', () => {
  render(
    <MemoryRouter>
      <HomepageVideos />
    </MemoryRouter>
  );
  // 这里写你的测试断言逻辑
});

如果测试的是嵌套层级的组件（比如Homepage -> HomeForm -> HomepageVideos），同样需要用MemoryRouter包裹最上层的测试组件：

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

方法2：封装带路由的测试工具函数 #

如果多个测试用例都需要路由上下文，可以封装一个工具函数减少重复代码：

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

export const renderWithRouter = (ui, options = {}) => {
  return render(
    <MemoryRouter {...options}>
      {ui}
    </MemoryRouter>,
    options
  );
};

之后在测试中直接使用这个封装好的函数：

import { renderWithRouter } from './test-utils';
import HomepageVideos from './HomepageVideos';

test('渲染HomepageVideos组件', () => {
  renderWithRouter(<HomepageVideos />);
  // 断言逻辑
});

方法3：模拟useContext（不推荐） #

除非你只需要测试组件的非路由相关部分，否则不建议直接模拟useContext——这种方式会跳过React Router的真实逻辑，可能导致测试结果不准确，优先选择前两种方法。

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