Jest测试Saga时报Browser history needs a DOM错误如何解决？

问题根因 #

报错触发和是否调用redirectTo无关，只要你的代码（包括你要测试的Saga）导入了包含createHistory()执行语句的模块，模块顶级作用域的createHistory()就会在导入瞬间执行。createBrowserHistory依赖浏览器DOM环境的window对象，而Jest默认运行在Node.js环境，无内置DOM，因此直接抛出错误。

可选解决方案 #

方案1：Mock history模块（最推荐，无需修改业务代码） #

在对应测试文件顶部，或者Jest全局setup文件中加入mock代码，替换真实的history实例逻辑：

// 替换为你实际导出redirectTo、history的模块路径
jest.mock('./path/to/history-utils', () => ({
  history: { push: jest.fn() },
  redirectTo: jest.fn()
}))

mock后模块内的真实createHistory代码不会执行，也就不会触发DOM依赖检测。如果后续你需要测试调用redirectTo的逻辑，也可以直接对redirectTo的mock实例做断言。

方案2：调整业务代码，延迟history初始化时机 #

修改history模块的代码，把history实例的创建从顶级作用域移到方法调用时，只有实际调用redirectTo才会初始化：

import createHistory from 'history/createBrowserHistory';

// 改为懒初始化
let history: ReturnType<typeof createHistory> | undefined;

export const redirectTo = (path: string): void => {
  if (!history) {
    history = createHistory();
  }
  history.push(path);
};

// 如果其他地方需要用到history实例，也可以改成getter
export const getHistory = () => {
  if (!history) {
    history = createHistory();
  }
  return history;
}

调整后只要测试过程中没有调用redirectTo或者getHistory，就不会触发createHistory执行，自然不会报错。

方案3：配置Jest启用jsdom模拟DOM环境 #

如果你的测试场景确实需要模拟浏览器DOM，可以修改Jest配置，将测试环境切换为jsdom：

1. 安装jsdom依赖（Jest 28+版本需要单独安装）：

npm install jest-environment-jsdom --save-dev

2. 修改jest.config.js配置：

module.exports = {
  testEnvironment: 'jsdom',
  // 其他原有配置
}

该方案会给所有测试用例模拟完整浏览器DOM环境，不需要修改业务代码，但如果你的项目大部分是Node侧逻辑测试，会额外增加测试运行开销，优先级低于前两个方案。

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