Jest测试React项目时PointerEvent未定义报错如何解决

Jest 默认基于 jsdom 模拟浏览器环境，你当前依赖版本对应的 jsdom 版本未完整实现 PointerEvent 构造函数：部分场景下触发的指针交互事件会被降级实现为 MouseEvent，直接引用 PointerEvent 就会抛出未定义的引用错误。

方案1：测试环境全局注入PointerEvent别名 #

找到项目中 Jest 的初始化配置文件（通常是 src/setupTests.js，对应 Jest 配置里的 setupFilesAfterEnv 字段引入的文件），加入以下兼容代码，在环境无原生实现时将 PointerEvent 作为 MouseEvent 的子类注入：

if (!global.PointerEvent) {
  class PointerEvent extends MouseEvent {
    constructor(type, options = {}) {
      super(type, options);
      // 按需补全PointerEvent特有属性
      this.pointerId = options.pointerId || 0;
      this.pointerType = options.pointerType || 'mouse';
      this.isPrimary = options.isPrimary ?? true;
      this.width = options.width || 1;
      this.height = options.height || 1;
      this.pressure = options.pressure || 0;
    }
  }
  global.PointerEvent = PointerEvent;
  window.PointerEvent = PointerEvent;
}

该逻辑仅在环境不存在 PointerEvent 时生效，后续升级 jsdom 版本获得原生实现后不会冲突。

方案2：优化生产环境类型判断逻辑（推荐） #

直接通过 constructor 做严格相等匹配本身存在兼容风险，不同运行环境、polyfill 实现都可能导致构造函数引用不一致。可以替换为原型链判断，天然兼容继承和降级场景，不需要额外修改测试环境：

function handleEvent(event) {
  if (typeof event === 'string') {
    // 原String分支逻辑
    doSomething();
    return;
  }
  if (Array.isArray(event)) {
    // 原Array分支逻辑
    doSomething();
    return;
  }
  if (event instanceof Date) {
    // 原Date分支逻辑
    doSomething();
    return;
  }
  if (event instanceof PointerEvent || (typeof PointerEvent === 'undefined' && event instanceof MouseEvent)) {
    // 原PointerEvent分支逻辑，兼容无PointerEvent的降级场景
    doSomething();
    return;
  }
  // 原default分支逻辑
  doSomething();
}

这种写法在生产、测试环境都能稳定运行，不会因为环境实现差异出现匹配错误。

方案3：升级jsdom获得原生PointerEvent支持 #

你当前使用的依赖版本对应的默认 jsdom 版本较低，可以手动升级最新版 jsdom 测试环境，原生支持 PointerEvent 所有接口，不需要额外做别名兼容：

1. 安装最新版jsdom测试环境：

npm install -D jest-environment-jsdom@latest

2. 在 Jest 配置文件中明确指定测试环境：

module.exports = {
  testEnvironment: 'jsdom',
  // 其余原有配置保持不变
}

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