如何使用Jest/Enzyme mock子组件componentDidMount中的fetch请求

这里有两种可行的实现思路，优先推荐第一种，符合单元测试隔离依赖的原则。

方案1：直接Mock CacheHandler组件（推荐） #

你的测试目标是验证MembersList在对应路由下的渲染逻辑，CacheHandler属于公共依赖组件，不需要在当前测试中覆盖它的内部逻辑，可以直接Mock绕开fetch和loading逻辑。

在测试文件顶部添加以下Mock代码，注意替换为你实际的CacheHandler导入路径：

// 示例路径，替换为你的CacheHandler实际导入路径
jest.mock('src/components/common/CacheHandler', () => ({
  __esModule: true,
  default: ({ children }) => children({
    loading: false,
    isLatestVersion: true,
    refreshCacheAndReload: jest.fn()
  })
}));

Mock完成后，你最初编写的同步测试代码就能直接运行通过，不需要异步等待逻辑。

方案2：Mock全局fetch请求，保留CacheHandler原逻辑 #

如果你需要在当前测试中覆盖CacheHandler的执行逻辑，可以正确Mock全局fetch来避免网络请求错误：

it('renders MembersList', async () => {
  // Mock全局fetch，返回和当前版本一致的响应
  global.fetch = jest.fn(() => Promise.resolve({
    ok: true,
    json: () => Promise.resolve({ version: global.appVersion })
  }));

  const Component = withMemory(AdminAppCore, ROUTE_ADMIN_MEMBERS);
  const result = mount(
    <MockProvider stores={{ memberStore, programStore }}>
      <Component />
    </MockProvider>
  );

  // 等待异步逻辑执行完成，更新组件树后断言
  await waitForState(result, state => state.loading === false);
  result.update();
  expect(result.find(MembersList).length).toBe(1);

  // 测试清理
  global.fetch.mockClear();
  delete global.fetch;
  result.unmount();
});

常见Mock fetch失败的原因排查 #

• 没有返回符合预期的响应结构：fetch的返回值需要是Promise，且resolve的对象必须包含json方法，json方法也需要返回Promise
• 断言前没有调用result.update()：Enzyme不会自动监听组件状态更新，需要手动调用update同步组件树
• Jest 28+版本默认没有注入全局fetch：可以提前导入whatwg-fetch包，或者直接用上述手动挂载global.fetch的写法

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