Angular17+Jest中存储import.meta.url报错问题求助

方案1：封装Worker服务隔离依赖，简化Mock #

把Web Worker的初始化逻辑抽成独立的Angular服务，组件只依赖服务而非直接操作import.meta.url，测试时直接Mock整个服务即可：

// my-test.worker.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class MyTestWorkerService {
  createWorker(): Worker {
    return new Worker(new URL('../workers/my-test.worker', import.meta.url));
  }
}

组件内调用：

constructor(private workerService: MyTestWorkerService) {
  this.myWorker = this.workerService.createWorker();
}

测试时Mock服务：

jest.mock('./my-test.worker.service.ts', () => ({
  MyTestWorkerService: jest.fn().mockImplementation(() => ({
    createWorker: jest.fn(() => ({
      postMessage: jest.fn(),
      onmessage: jest.fn(),
      terminate: jest.fn()
    }))
  }))
}));

方案2：用条件编译区分运行/测试环境 #

通过环境变量判断当前环境，测试时给baseUrl赋值为Jest能处理的占位符，避免触发import.meta.url的语法检查：

// 组件内
const baseUrl = typeof process !== 'undefined' && process.env.NODE_ENV === 'test' 
  ? 'http://localhost/test' // 测试环境用合法URL占位
  : import.meta.url;

this.myWorker = new Worker(new URL('../workers/my-test.worker', baseUrl));

测试时全局Mock Worker：

beforeEach(() => {
  global.Worker = jest.fn().mockImplementation(() => ({
    postMessage: jest.fn(),
    onmessage: jest.fn(),
    terminate: jest.fn()
  }));
});

方案3：修复变量存储时的编译错误（针对你遇到的<语法问题） #

你之前遇到的Unexpected token '<'，是因为Angular的Vite构建工具误把单独文件里的import.meta.url当成了HTML模板插值处理。解决方法是把变量放在组件文件内，并用注释告知Vite跳过处理：

// 组件文件内
/* @vite-ignore */
const baseUrl = import.meta.url;

this.myWorker = new Worker(new URL('../workers/my-test.worker', baseUrl));

然后在Jest的全局setup文件中Mockimport.meta.url：

// jest.setup.ts
Object.defineProperty(import.meta, 'url', {
  value: 'http://localhost/test'
});

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