RTK Query与fetch-mock-jest兼容问题：无法识别Request对象

问题原因 #

RTK Query内部生成的Request实例，其构造器与fetch-mock默认识别的构造器不匹配（RTK Query底层依赖cross-fetch做跨环境兼容），导致fetch-mock无法识别请求，抛出"Unrecognised Request object"错误。

配置步骤（在setupTests.js中完成） #

1. 配置fetch-mock识别RTK Query的Request构造器 #

如果项目未安装相关依赖，先执行安装：

npm install --save-dev cross-fetch fetch-mock-jest

在setupTests.js中添加以下配置代码：

import fetchMock from 'fetch-mock-jest';
import { Request } from 'cross-fetch';

// 让fetch-mock识别RTK Query使用的Request构造器
fetchMock.config.Request = Request;
// 同时兼容全局fetch发起的普通请求
fetchMock.config.fetch = global.fetch;

2. 测试用例中的常规使用 #

配置完成后，可正常使用fetch-mock的语法匹配所有请求，不管是RTK Query钩子发起的还是普通fetch调用的：

// 匹配RTK Query的GET请求
fetchMock.get('/api/user-data', { data: { name: 'test' } });

// 匹配普通fetch的POST请求
fetchMock.post('/api/upload', { status: 201, body: { id: 123 } });

3. 处理文档下载类请求 #

对于普通fetch的文档下载场景，可模拟返回Blob类型数据：

fetchMock.get('/api/download-report', () => 
  new Blob(['sample report content'], { type: 'application/vnd.ms-excel' })
);

关键说明 #

• RTK Query默认依赖cross-fetch实现跨环境fetch，必须将其Request构造器注册给fetch-mock，才能识别RTK Query生成的请求实例。
• 配置fetchMock.config.fetch = global.fetch是为了兼容直接调用全局fetch的普通请求，确保两种请求都能被正确拦截。

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