Remix/Cloudflare Pages开发环境中Request类使用报错问题

错误原因 #

1. IDE无报错是因为@cloudflare/workers-types提供了TypeScript类型声明，但这仅为类型定义，没有实际运行时代码，所以测试运行时会找不到Request构造函数。
2. 测试环境（如Jest）基于Node.js运行：
   • Node.js 18以下版本原生不支持Request/Response等Web Fetch API对象；
   • 即使是Node.js 18+，其原生Fetch实现和Cloudflare Workers的Runtime存在差异，直接使用可能导致测试结果和生产环境不一致。
3. Miniflare的polyfill不会自动注入到测试环境中，需要手动配置或引入。

解决方案 #

方案1：直接导入Miniflare的polyfill

Miniflare内置了Cloudflare Workers Runtime的完整polyfill，直接在测试文件中导入即可使用：

import { loader } from '~/routes/example';
import { Request } from 'miniflare'; // 导入Miniflare提供的Request

test('loader test', async () => {
  const response = await loader({
    request: new Request('http://localhost:xxxx/entries'),
    params: {},
    context: {},
  });

  expect(response).toBeInstanceOf(Response);
});

方案2：全局配置测试框架注入polyfill

如果多个测试文件都需要使用Request/Response，可以在测试框架的全局初始化文件中配置：

1. 创建测试初始化文件（如app/tests/setup.ts）：

import { Request, Response, Headers } from 'miniflare';

// 挂载到全局对象，让所有测试文件都能直接使用
global.Request = Request;
global.Response = Response;
global.Headers = Headers;

2. 在Jest配置文件（jest.config.js）中指定初始化文件：

module.exports = {
  // 其他配置...
  setupFilesAfterEnv: ['<rootDir>/app/tests/setup.ts'],
};

方案3：使用Node.js原生Fetch API（仅适用于Node 18+）

如果你的测试环境使用Node.js 18或更高版本，原生已支持Fetch API，可以直接使用全局的Request/Response，但注意：此实现和Cloudflare Workers的Runtime可能存在行为差异，如需完全对齐生产环境，优先选择前两个方案。

• 若使用Node.js 16，可在测试脚本中添加实验性Fetch支持：

// package.json
{
  "scripts": {
    "test": "NODE_OPTIONS=\"--experimental-fetch\" jest"
  }
}

关于@cloudflare/workers-types的正确使用 #

你尝试导入@cloudflare/workers-types/index失败是因为这个包仅提供类型定义，无需导入，只需在tsconfig.json中配置类型即可：

{
  "compilerOptions": {
    // 其他配置...
    "types": ["@cloudflare/workers-types"]
  }
}

确保该包已作为开发依赖安装：

npm install -D @cloudflare/workers-types

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