jest+react-testing-library测试组件报symbol is not a function错误求助

错误根源 #

• <Link> 是 React Router 生态的组件，必须在 Router 上下文环境中运行，你测试时直接渲染 <Header/> 没有提供对应上下文，就会抛出类型错误。
• 你当前写的 jest.mock 全量覆写了 react-router 的导出，破坏了内部定义的 Symbol 类型常量，也是触发 symbol is not a function 报错的直接原因。

修复步骤 #

1. 移除你现有的全量 jest.mock('react-router') 代码，改用官方推荐的测试方案
2. 测试时用 MemoryRouter 包裹被测组件，提供路由运行上下文

修正后的测试代码

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
// 替换为你实际的Header组件导入路径
import { Header } from './Header';

test("should render the home page", () => {
    render(
        <MemoryRouter>
            <Header />
        </MemoryRouter>
    );
    const navbar = screen.getByTestId("navbar");
    const link = screen.getByTestId("home-link");
    // 更符合测试规范的断言，无需读取innerHTML
    expect(link).toHaveTextContent("Home Page");
    expect(navbar).toContainElement(link);
});

如果确实需要自定义 useLocation 的返回值，使用 jest.spyOn 单独mock对应hook即可，不会影响其他导出内容：

import * as reactRouter from 'react-router';

test("custom useLocation return value", () => {
    jest.spyOn(reactRouter, 'useLocation').mockReturnValue({
        pathname: "/custom-path",
        search: '',
        hash: '',
        state: null
    });
    render(
        <MemoryRouter>
            <Header />
        </MemoryRouter>
    );
    // 自定义断言逻辑
});

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