使用Jest和Enzyme测试异步请求后React组件的状态（模块Mock）

你的问题核心是Jest的模块缓存机制和Mock执行时机导致的，和异步测试的处理方式也有一定关系，下面我来详细拆解并给出解决办法：

为什么手动Mock正常，动态Mock失效？ #

当你在测试文件顶部直接导入Header组件时，Jest会立即加载组件及其依赖的getUser模块。如果后续再用jest.mock修改Mock实现，已经加载的组件引用的还是最初的模块（或初始Mock），不会因为后续的Mock定义而更新——这是Node.js模块缓存机制导致的，Jest继承了这个特性。

另外，异步操作的测试需要确保等待Promise完成后再断言状态，否则会出现“状态还没更新就执行expect”的情况，这也会让你误以为Mock没生效。

解决方案1：确保Mock在组件导入前执行 #

把jest.mock放在组件导入之前，然后用mockResolvedValue动态设置不同测试场景的返回值：

import React from "react";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import getUser from "../react/fetch/getUser";

// 先Mock getUser，再导入Header组件，确保组件引用的是Mock后的函数
jest.mock("../react/fetch/getUser");

import Header from "../react/components/Header";

Enzyme.configure({ adapter: new Adapter() });

describe("<Header/>", () => {
  // 每个测试前重置Mock，避免测试间污染
  beforeEach(() => {
    getUser.mockClear();
  });

  describe("用户已登录的场景", () => {
    beforeEach(() => {
      // 设置Mock返回登录用户信息
      getUser.mockResolvedValue({ username: "Username" });
    });

    it("componentDidMount后应该更新state.user", async () => {
      const wrapper = mount(<Header />);
      // 等待异步请求完成
      await getUser();
      // 强制组件更新，确保状态变更后重新渲染
      wrapper.update();
      expect(wrapper.state()).toEqual({ user: "Username", pleaseLogin: false });
    });
  });

  describe("用户未登录的场景", () => {
    beforeEach(() => {
      // 设置Mock返回空对象，模拟未登录
      getUser.mockResolvedValue({});
    });

    it("应该把pleaseLogin设为true", async () => {
      const wrapper = mount(<Header />);
      await getUser();
      wrapper.update();
      expect(wrapper.state()).toEqual({ user: null, pleaseLogin: true });
    });
  });
});

解决方案2：用jest.doMock结合动态导入 #

如果需要在不同测试用例中完全替换Mock实现，可以用jest.doMock，并配合动态导入组件，彻底避开模块缓存的影响：

import React from "react";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

describe("<Header/>", () => {
  // 每个测试前清除模块缓存，确保组件和依赖都重新加载
  beforeEach(() => {
    jest.resetModules();
  });

  it("用户登录时更新state.user", async () => {
    // 动态Mock getUser
    jest.doMock("../react/fetch/getUser", () => {
      return jest.fn(() => Promise.resolve({ username: "Username" }));
    });
    // 动态导入组件和getUser
    const Header = (await import("../react/components/Header")).default;
    const getUser = (await import("../react/fetch/getUser")).default;

    const wrapper = mount(<Header />);
    await getUser();
    wrapper.update();
    expect(wrapper.state()).toEqual({ user: "Username", pleaseLogin: false });
  });

  it("用户未登录时设置pleaseLogin为true", async () => {
    jest.doMock("../react/fetch/getUser", () => {
      return jest.fn(() => Promise.resolve({}));
    });
    const Header = (await import("../react/components/Header")).default;
    const getUser = (await import("../react/fetch/getUser")).default;

    const wrapper = mount(<Header />);
    await getUser();
    wrapper.update();
    expect(wrapper.state()).toEqual({ user: null, pleaseLogin: true });
  });
});

额外注意事项 #

• 用Jest提供的mockResolvedValue替代手动返回Promise，写法更简洁且不易出错。
• 每次测试后用mockClear()重置Mock调用记录，避免测试用例之间的干扰。
• 调用wrapper.update()强制组件重新渲染，因为状态更新是异步的，Enzyme不会自动等待状态变更完成。

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