如何在React测试中Mock组件已导入的functionIWantToMock函数？

你直接赋值修改函数的方式无效，核心原因是组件在导入阶段就绑定了原函数的引用，你在测试文件里修改变量，不会影响组件内部持有的函数引用。下面是两种可行的解决方法：

方案一：Mock整个导入模块 #

用jest.mock直接指定目标模块的Mock实现，保留其他导出的原始行为，只替换需要Mock的函数：

修改后的component.test.js代码：

import { Component } from "./component";
import { render, screen } from "@testing-library/react";
import { functionIWantToMock } from "somewhere/on/my/hdd";

// Mock目标模块，保留原始导出的其他内容，仅替换functionIWantToMock
jest.mock("somewhere/on/my/hdd", () => ({
  ...jest.requireActual("somewhere/on/my/hdd"),
  functionIWantToMock: jest.fn(() => "empty"),
}));

it("should change the result of the function", () => {
  render(<Component/>);
  // 断言Mock后的返回值已被渲染
  expect(screen.getByText("empty")).toBeInTheDocument();
});

方案二：用Spy单独替换函数实现 #

如果不想Mock整个模块，只想针对性替换单个函数，可以用jest.spyOn：

修改后的component.test.js代码：

import { Component } from "./component";
import { render, screen } from "@testing-library/react";
import * as myModule from "somewhere/on/my/hdd";

it("should change the result of the function", () => {
  // 创建函数间谍并指定返回值
  const mockFunction = jest.spyOn(myModule, "functionIWantToMock").mockReturnValue("empty");
  
  render(<Component/>);
  
  expect(screen.getByText("empty")).toBeInTheDocument();
  
  // 测试结束后恢复原始函数，避免影响其他测试用例
  mockFunction.mockRestore();
});

这两种方法都是直接修改模块导出的函数引用，所以能覆盖组件内部的调用逻辑，解决你之前遇到的Mock无效问题。

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