如何在Vitest手动__mocks__中保留模块原实现仅Mock指定方法

在你的__mocks__/react-router-dom.ts文件中，借助Jest的jest.requireActual方法获取模块的真实实现，再仅覆盖需要Mock的方法即可保留其余功能的原始逻辑：

// 获取react-router-dom的真实导出内容
const actualReactRouterDom = jest.requireActual('react-router-dom');

// 导出所有原始实现，同时替换useNavigate为自定义Mock
module.exports = {
  ...actualReactRouterDom,
  useNavigate: jest.fn(() => jest.fn()),
};

// TypeScript环境下也可使用export default语法：
// export default {
//   ...actualReactRouterDom,
//   useNavigate: jest.fn(() => jest.fn()),
// };

这样配置后，除useNavigate被你定义的Mock函数替代外，react-router-dom的其他方法（如useParams、Link组件等）都会保持原本的实现。

如果需要在单个测试文件中动态调整useNavigate的Mock行为，还可以在测试代码中做如下修改：

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

jest.mock('react-router-dom');

test('示例测试用例', () => {
  // 自定义当前测试用例的navigate Mock函数
  const mockNavigate = jest.fn();
  (useNavigate as jest.Mock).mockReturnValue(mockNavigate);

  // 执行你的测试逻辑...
});

这种方式既复用了全局Mock的基础配置，又能在特定测试场景下灵活调整Mock行为。

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