如何将Jest中mock useNavigate的代码放入__mocks__目录复用？

完全可行，按以下步骤操作即可实现复用：

1. 创建全局Mock文件 #

在项目根目录下新建 __mocks__/react-router-dom.js 文件，内容如下：

const originalModule = jest.requireActual('react-router-dom');
// 导出可被测试文件调用的mock函数
export const mockedUseNavigate = jest.fn();

export default {
  ...originalModule,
  useNavigate: () => mockedUseNavigate,
};

这个文件会保留react-router-dom的所有原生导出，仅替换useNavigate为我们的mock函数，同时将mock函数暴露出来供测试断言使用。

2. 在测试文件中使用Mock #

在需要测试导航逻辑的文件中，直接引入mock函数并使用：

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

// 每次测试前重置mock，避免测试间的状态污染
beforeEach(() => {
  mockedUseNavigate.mockReset();
});

test('触发按钮后跳转到指定路径', () => {
  render(<YourComponent />);
  
  // 触发组件中触发导航的操作，比如点击按钮
  screen.getByText('跳转').click();
  
  // 断言导航函数被正确调用
  expect(mockedUseNavigate).toHaveBeenCalledWith('myurl/user-1');
});

Jest会自动识别__mocks__目录下的文件，无需在每个测试文件中重复编写jest.mock('react-router-dom')（如果需要禁用全局mock，可在测试文件中添加jest.unmock('react-router-dom')）。

3. TypeScript 适配（可选） #

如果项目使用TypeScript，需要添加类型声明文件__mocks__/react-router-dom.d.ts来避免类型错误：

import type * as ReactRouterDOM from 'react-router-dom';

declare module 'react-router-dom' {
  export const mockedUseNavigate: jest.Mock;
}

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