使用Jest Mock React useLocation钩子失败及作用域问题咨询

一、useLocation未定义的报错解决 #

你遇到的报错大概率是以下几个原因之一，对应解决方案如下：

1. 确保mock语句在组件导入前执行 #

虽然Jest会自动将jest.mock提升到文件顶部，但如果组件导入语句写在jest.mock之前，可能导致mock未生效。调整代码顺序，确保jest.mock在组件import之前：

// 先执行mock
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: jest.fn().mockReturnValue({ pathname: '/route' })
}));

// 再导入组件
import ComponentUsingLocation from './ComponentUsingLocation';

2. 检查组件中useLocation的导入方式 #

确认你的组件中是命名导入useLocation，而非默认导入：

// 正确写法
import { useLocation } from 'react-router-dom';

// 错误写法（会导致mock不匹配）
import useLocation from 'react-router-dom';

3. 更换渲染方式或检查Enzyme配置 #

Enzyme的shallow渲染对Hook的支持可能存在局限性，尝试改用mount渲染，或者确保你安装了适配当前React版本的Enzyme适配器（比如@wojtekmaj/enzyme-adapter-react-18）：

test('should render', () => {
  const wrapper = mount(<ComponentUsingLocation />);
  expect(wrapper).toMatchSnapshot();
});

4. 手动在测试用例中重置mock返回值 #

可以将mock的返回值设置放在beforeEach中，确保每次测试都能正确初始化：

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

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: jest.fn()
}));

describe('ComponentUsingLocation', () => {
  beforeEach(() => {
    useLocation.mockReturnValue({ pathname: '/route' });
  });

  test('should render', () => {
    const wrapper = shallow(<ComponentUsingLocation />);
    expect(wrapper).toMatchSnapshot();
  });
});

二、关于Mock作用范围的疑问 #

1. 单个文件的Mock不会影响其他测试文件：Jest在执行每个测试文件时，会隔离模块缓存，每个文件的jest.mock只会作用于当前文件，不会污染其他测试的模块依赖。

2. 仅针对单个文件Mock的方法：你当前的写法就是正确的——在目标测试文件中直接使用jest.mock即可。Jest的模块隔离机制会自动保证该Mock只在当前文件生效，无需额外配置。

内容的提问来源于stack exchange，提问作者Ioan-Radu Tanasescu