如何在Jest中使用多个Mock函数？解决Mock被覆盖问题

问题根源 #

你当前的mock写法存在核心错误：自定义Hook不能是异步函数（不能返回Promise），但你在mock中用Promise.resolve()包裹了返回值，这会导致组件调用Hook时得到的是Promise而非预期的对象，进而引发一系列错误，包括看似“mock被覆盖”的假象。

正确的Mock写法 #

每个自定义Hook的mock需要直接返回与原Hook结构一致的同步值，而非Promise。多个模块的jest.mock调用是相互独立的，只要模块路径正确、返回结构匹配，就不会出现覆盖问题。

修正后的代码示例：

// Mock services/fleet模块的两个Hook
jest.mock("services/fleet", () => ({
  __esModule: true,
  // 直接返回包含mutate方法的对象，和原Hook的返回结构一致
  useCreateFleetManager: () => ({
    mutate: jest.fn()
  }),
  useDeleteFleetManager: () => ({
    mutate: jest.fn()
  })
}));

// Mock services/user模块的Hook
jest.mock("services/user", () => ({
  __esModule: true,
  useUsers: () => ({
    mutate: jest.fn()
  }),
}));

额外注意事项 #

• 确保原Hook的返回结构与mock完全匹配：如果原Hook还返回了isLoading、error等状态，mock时也需要一并模拟，避免组件因缺失属性报错。
• 若需要动态修改mock的返回值，可以在测试用例中通过jest.spyOn来更新：

  import { useCreateFleetManager } from "services/fleet";
  
  test("测试组件逻辑", () => {
    const mockMutate = jest.fn().mockResolvedValue({ id: 123 });
    jest.spyOn(require("services/fleet"), "useCreateFleetManager").mockReturnValue({
      mutate: mockMutate
    });
    // 后续测试逻辑
  });
  

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