React组件测试：Jest+Enzyme导入Mock失效问题排查

我使用Jest结合Enzyme对React组件进行测试，该组件依赖需Mock的外部函数。尝试用以下代码Mock导入：

let mockFeature = {
    feature1 : jest.fn(() => true),
    feature2 :jest.fn(() => true),
 };

beforeEach(() => {
jest.mock('../../viewHelper/featureUtility  ', () => (
    {
        getFeature1 : mockFeature.feature1,
        getFeature2 : mockFeature.feature2
    }
  ));
});

但挂载组件时Mock未生效，组件仍使用真实实现。测试代码如下：

import { mount } from "enzyme";

const wrapper = mount(
   <MemoryRouter>
      <MyComponent />
   </MemoryRouter>
);

test("renders MyComponent", () => {
   expect(wrapper.exists()).toBe(true);
});

请问缺少什么步骤？如何在Enzyme测试中正确Mock导入的外部函数？

原因及解决方案 #

你的Mock不生效核心问题是**jest.mock的执行时机不对**——Jest会在模块导入阶段优先处理jest.mock调用，而你把它放在beforeEach里，此时组件已经完成了真实模块的导入，Mock自然不会生效。

正确的实现步骤： #

• 把jest.mock放在模块顶部（导入语句之后，测试代码之前）
• 保留对Mock函数的引用，方便后续断言或修改返回值
• 在beforeEach中重置Mock函数的调用记录，避免测试用例互相污染

修正后的基础版本代码： #

import { mount } from "enzyme";
import { MemoryRouter } from "react-router-dom";
import MyComponent from "./MyComponent";

// 1. 顶部定义Mock，Jest会在模块导入前优先处理
jest.mock('../../viewHelper/featureUtility', () => ({
  getFeature1: jest.fn(() => true),
  getFeature2: jest.fn(() => true),
}));

// 2. 导入Mock后的模块，获取Mock函数引用
import { getFeature1, getFeature2 } from '../../viewHelper/featureUtility';

describe("MyComponent测试", () => {
  beforeEach(() => {
    // 3. 重置Mock调用记录
    getFeature1.mockClear();
    getFeature2.mockClear();
  });

  test("renders MyComponent", () => {
    const wrapper = mount(
      <MemoryRouter>
        <MyComponent />
      </MemoryRouter>
    );
    expect(wrapper.exists()).toBe(true);
    // 可选：断言Mock函数是否被组件调用
    expect(getFeature1).toHaveBeenCalled();
  });
});

支持动态修改返回值的进阶版本： #

如果需要在不同测试用例中返回不同结果，可以提前创建独立的Mock函数：

import { mount } from "enzyme";
import { MemoryRouter } from "react-router-dom";
import MyComponent from "./MyComponent";

// 提前创建Mock函数
const mockGetFeature1 = jest.fn();
const mockGetFeature2 = jest.fn();

// 顶部绑定Mock到目标模块
jest.mock('../../viewHelper/featureUtility', () => ({
  getFeature1: () => mockGetFeature1(),
  getFeature2: () => mockGetFeature2(),
}));

describe("MyComponent测试", () => {
  beforeEach(() => {
    // 重置调用记录
    mockGetFeature1.mockClear();
    mockGetFeature2.mockClear();
  });

  test("feature1为true时显示对应内容", () => {
    // 动态设置返回值
    mockGetFeature1.mockReturnValue(true);
    
    const wrapper = mount(
      <MemoryRouter>
        <MyComponent />
      </MemoryRouter>
    );
    
    expect(wrapper.find('.feature1-section').exists()).toBe(true);
  });

  test("feature1为false时隐藏对应内容", () => {
    mockGetFeature1.mockReturnValue(false);
    
    const wrapper = mount(
      <MemoryRouter>
        <MyComponent />
      </MemoryRouter>
    );
    
    expect(wrapper.find('.feature1-section').exists()).toBe(false);
  });
});

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