React集成测试中如何让Vitest识别Web Worker的new URL()写法？

可行解决方案： #

1. 启用Vitest的Web Worker支持 #

修改vite.config.ts中的test配置，添加Web Worker启用选项：

test: {
  globals: true,
  environment: 'jsdom',
  css: true,
  setupFiles: ['./__tests__/setup.ts', '@vitest/web-worker'],
  // 新增：开启Web Worker支持
  webWorker: {
    enable: true,
  },
}

2. 在测试环境替换Worker构造函数 #

方式一：组件内环境判断

在组件文件中根据环境变量切换Worker构造函数：

let WorkerConstructor = Worker;

// 测试环境下使用@vitest/web-worker提供的Worker
if (import.meta.env.MODE === 'test') {
  import('@vitest/web-worker').then(module => {
    WorkerConstructor = module.Worker;
  });
}

const MyComponent = () => {
    ...
    const worker = new WorkerConstructor(
        new URL('../../../path/to/my-worker.ts', import.meta.url)
    );
    ...
}

方式二：测试文件全局Mock

在测试文件顶部全局替换Worker：

import { Worker } from '@vitest/web-worker';

beforeAll(() => {
  global.Worker = Worker;
});

3. 排查插件冲突 #

检查@wyw-in-js/vite或vite-plugin-linaria是否干扰了Worker文件解析：

• 暂时禁用这两个插件，验证问题是否消失。如果解决，调整插件的include/exclude规则，排除Worker文件（例如exclude: ['**/*-worker.ts']），避免插件错误处理Worker代码。

4. 简化Worker文件路径 #

多层../路径在测试环境可能解析异常，可在vite.config.ts中添加路径别名：

import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@workers': path.resolve(__dirname, 'src/path/to/workers'),
    },
  },
  // ...其他配置
});

之后组件内使用别名路径：

const worker = new WorkerConstructor(
    new URL('@workers/my-worker.ts', import.meta.url)
);

内容的提问来源于stack exchange，提问作者Joseph Beuys' Mum