如何在Create React App的Jest测试中配置代理？

你遇到的这个问题确实很典型——CRA的proxy配置只在开发服务(npm start)中生效，测试环境里JSDom默认不支持跨域请求，而直接修改JSDom的ResourceLoader需要绕过CRA封装好的默认配置。下面是两种可行的解决方案：

方案一：在单个测试文件中手动替换JSDom实例 #

如果只需要在特定测试里启用代理，可以直接在测试文件顶部重新初始化JSDom并替换全局环境对象：

import { JSDOM } from 'jsdom';

// 初始化带代理配置的JSDom资源加载器
const resourceLoader = new JSDOM.ResourceLoader({
  proxy: "http://127.0.0.1:9001",
});

// 创建新的JSDom实例，配置与开发环境匹配的基础URL
const dom = new JSDOM('<!doctype html>', {
  resourceLoader,
  runScripts: 'dangerously', // 确保React能在DOM环境中正常执行脚本
  url: 'http://localhost:3000', // 匹配开发环境的基础URL，避免跨域判定
});

// 替换全局的window、document等对象
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

⚠️ 注意：这段代码必须放在所有React组件导入之前执行，否则组件可能会使用默认的JSDom实例导致渲染异常。

方案二：全局配置（所有测试自动生效） #

如果想让所有测试都使用带代理的JSDom，可以通过CRA的全局测试启动脚本实现：

1. 在项目根目录的src文件夹下创建setupTests.js（CRA会自动识别这个文件作为Jest的全局初始化脚本）。
2. 在setupTests.js中添加以下代码：

import { JSDOM } from 'jsdom';

// 配置带代理的资源加载器
const resourceLoader = new JSDOM.ResourceLoader({
  proxy: "http://127.0.0.1:9001",
});

// 构建新的JSDom实例
const dom = new JSDOM('<!doctype html>', {
  resourceLoader,
  runScripts: 'dangerously',
  url: 'http://localhost:3000',
});

// 替换全局环境，让所有测试共享这个配置
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

这样所有测试启动时都会自动使用这个带代理的JSDom实例，无需在每个测试文件重复配置。

额外注意事项 #

• 确保你的代理服务器（http://127.0.0.1:9001）在测试运行时处于启动状态，否则API请求会直接失败。
• runScripts: 'dangerously'是必要配置——React需要在DOM环境中执行脚本，虽然这个选项带"dangerously"后缀，但测试环境下基本不存在安全风险。
• 如果你的API请求目标域名固定，也可以把JSDOM的url参数设置为该域名，进一步避免跨域判定问题。

内容的提问来源于stack exchange，提问作者Marnix.hoh