Rollup构建React包在Jest测试中报Headers相关TypeError

核心原因 #

你遇到的TypeError: Cannot set properties of undefined (setting 'Headers')错误，本质是构建产物的环境适配性问题：

1. Rollup配置中，module字段对应的输出格式被错误设置为cjs，而非标准ES模块格式，导致导入项目无法正确区分环境加载对应产物；
2. resolve({ browser: true })会让Rollup优先解析依赖的浏览器版本，这类依赖可能直接依赖浏览器全局对象（比如Headers属于Fetch API，Node.js环境默认不存在），而Jest运行在Node环境中，自然找不到该全局对象。

具体修复步骤 #

1. 修正Rollup的输出格式 #

将package.json.module对应的输出格式改为ES模块（es），让支持ES模块的项目可以按需加载，同时避免环境混淆：

export default {
  // ...其他配置
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
      exports: 'named',
    },
    {
      file: packageJson.module,
      format: 'es', // 改为ES模块格式
      sourcemap: true,
      exports: 'named',
    },
  ],
  // ...其他配置
};

2. 调整resolve插件的环境适配 #

如果你的包需要同时兼容浏览器和Node环境，可以修改resolve配置，让它根据目标环境自动选择依赖版本：

resolve({
  browser: true,
  preferBuiltins: true, // 优先使用Node内置模块（如果存在对应实现）
})

3. 在Jest中模拟缺失的浏览器全局对象 #

如果你的包确实依赖Headers等浏览器API，且无法通过构建配置规避，可以在Jest中手动模拟这些对象：

• 创建jest.setup.js文件：

// 模拟Headers对象（基础实现）
global.Headers = class Headers {
  constructor(init = {}) {
    this._headers = { ...init };
  }
  append(key, value) {
    this._headers[key] = value;
  }
  get(key) {
    return this._headers[key];
  }
  // 根据业务需求添加delete、set等其他方法
};

• 在jest.config.js中引入该文件：

module.exports = {
  // ...其他配置
  setupFiles: ['./jest.setup.js'],
};

4. 确认peerDependencies配置 #

确保你的package.json中正确声明了React等peer依赖，避免将这些依赖打包进产物，导致环境冲突：

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

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