Jest测试AppRouter组件报ReferenceError: Worker is not defined错误

问题复现场景 #

执行Jest测试用例，覆盖到AppRouter组件相关逻辑时，控制台直接抛出ReferenceError: Worker is not defined错误，测试流程中断。

根因说明 #

Jest默认使用的jsdom测试环境未内置Web Worker API实现，当被测代码（AppRouter相关逻辑）中直接调用new Worker()初始化实例时，就会触发未定义引用错误。

可落地修复方案 #

• 全局Mock Worker API（推荐）
  在项目的Jest初始化配置文件中全局注入Worker的Mock实现，一次配置覆盖所有测试用例：
  1. 新建或打开已有的jest.setup.js配置文件，添加Mock逻辑：

  class MockWebWorker {
    constructor(scriptUrl) {
      this.scriptUrl = scriptUrl;
      // 预留事件回调挂载位
      this.onmessage = null;
      this.onerror = null;
    }
    // 模拟消息发送逻辑，可根据业务测试需求自定义返回内容
    postMessage(data) {
      if (this.onmessage) {
        this.onmessage({ data: `mock-response:${data}` });
      }
    }
    // 模拟Worker销毁逻辑
    terminate() {
      this.onmessage = null;
      this.onerror = null;
    }
  }
  // 挂载到全局对象
  global.Worker = MockWebWorker;
  

  2. 在jest.config.js中引入该setup文件，确保测试启动时优先加载：

  module.exports = {
    testEnvironment: "jsdom",
    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
    // 其余原有Jest配置保持不变
  };
  

• 升级依赖版本
  将项目中jest、jest-environment-jsdom依赖升级至29.0以上版本，新版jsdom补全了部分Web API兼容，部分轻量Worker调用场景无需手动Mock即可正常运行。
• 单测试文件临时Mock
  如果仅单个测试文件涉及Worker调用，不需要全局生效，可直接在对应测试文件的钩子函数中注入Mock：

  beforeEach(() => {
    global.Worker = class {
      postMessage() {}
      terminate() {}
    };
  });
  
  // 后续编写AppRouter相关测试用例即可
  

提示：如果AppRouter内部使用Worker做路由懒加载、预解析等逻辑，可以根据测试用例的断言需求，调整Mock Worker的postMessage返回值，不需要完全还原真实Worker的多线程行为，只要覆盖测试路径即可。

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