Jest测试Redux异步action时报"Cannot read property 'prototype' of undefined"

排查步骤 #

• 第一步：校验fetch mock路径匹配一致性
  测试代码中你mock的请求地址是contactMeURL，但业务代码实际请求地址是${apiRoot}/contact，首先确认测试环境下apiRoot拼接后的完整路径和contactMeURL完全一致，包括协议、域名、端口、路径前后斜杠。如果路径不匹配，fetchMock不会拦截请求，会直接发起真实请求，Node环境无原生fetch就会直接抛出异常。

• 第二步：修复全局fetch挂载与node-fetch版本兼容问题
  Jest运行在Node环境，默认没有全局fetch对象，你需要做以下配置：

  1. node-fetch@3.x仅支持ESM规范，如果你项目用CommonJS（用require导入模块），直接降级node-fetch到2.x版本：

     npm install node-fetch@2 --save-dev
     

  2. 在Jest的全局setup文件中添加全局fetch挂载逻辑：

     global.fetch = require('node-fetch');
     

• 第三步：确认redux-mock-store已配置异步中间件
  redux-mock-store默认不会加载你项目中使用的异步中间件（比如redux-thunk），如果你的异步action是基于thunk实现的，创建mockStore时必须传入中间件：

  import configureMockStore from 'redux-mock-store';
  import thunk from 'redux-thunk';
  // 初始化时传入thunk中间件
  const mockStore = configureMockStore([thunk]);
  

  未配置中间件的情况下，dispatch函数类型的thunk action会直接报错，不会执行内部的fetch逻辑。

• 第四步：校验变量定义与mock规则
  你提供的测试代码中使用了contactMeForm变量，但片段中没有该变量的定义，确认该变量已正确赋值。如果fetchMock开启了请求body匹配，传入的contactMeForm序列化后和mock规则不一致也会导致匹配失败。
  可以添加fetchMock未匹配请求捕获逻辑快速定位匹配问题：

  fetchMock.catch((url) => {
    console.error('未匹配到mock的请求：', url);
    return { status: 404 };
  });
  

• 第五步：添加错误捕获定位具体报错
  在业务代码的fetch调用链末尾添加catch回调打印具体错误信息：

  return fetch(`${apiRoot}/contact`, {
      // 原有配置
  })
    .then(response => response.json())
    .then(json => {
      // 原有逻辑
    })
    .catch(err => {
      console.error('fetch执行报错：', err);
      throw err;
    });
  

• 第六步：清理mock避免用例间干扰
  在每个测试用例跑完后重置fetchMock状态，避免前序用例的mock规则影响当前用例：

  afterEach(() => {
    fetchMock.reset();
  });
  

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