如何在Jest测试中正确Mock Web Worker？

问题分析 #

你当前的Worker Mock实现过于简单，没有模拟heic2any库中Worker的实际消息交互逻辑，导致测试无法正确验证转换流程。需要让Mock Worker能够模拟真实的消息处理，返回符合预期的PNG Base64结果。

正确的Mock方案 #

方案1：直接Mock全局Worker并模拟消息回调 #

修改测试代码，让Mock Worker匹配heic2any的消息格式，返回模拟的转换结果：

import { convertHeicToPng } from './heicUtils';

class MockWorker {
  url: string;
  onmessage: ((m: MessageEvent) => void) | null = null;
  onerror: ((e: ErrorEvent) => void) | null = null;

  constructor(url: string) {
    this.url = url;
  }

  postMessage(msg: any) {
    // 模拟heic2any的Worker处理逻辑：匹配真实消息格式，返回PNG Base64
    if (msg?.type === 'convert' && msg?.buffer) {
      this.onmessage?.({
        data: {
          result: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
        }
      } as MessageEvent);
    }
  }

  terminate() {}
}

// 替换全局Worker对象
(window.Worker as any) = MockWorker;

describe('test heicUtils', () => {
  test('should convert HEIC to PNG', async () => {
    const file = new File([''], 'test.heic', { type: 'image/heic' });
    const base64 = await convertHeicToPng(file);
    expect(base64).toContain('data:image/png;base64');
  });
});

方案2：用Jest的jest.mock模拟Worker模块（适用于模块化导入Worker的场景） #

如果heic2any是通过导入Worker文件的方式使用（比如import Worker from './heic.worker?worker'），可以直接Mock该模块：

// 提前Mock Worker模块
jest.mock('./heic.worker', () => {
  return class MockWorker {
    onmessage: ((m: MessageEvent) => void) | null = null;
    postMessage(msg: any) {
      this.onmessage?.({
        data: {
          result: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
        }
      } as MessageEvent);
    }
    terminate() {}
  };
});

import { convertHeicToPng } from './heicUtils';

describe('test heicUtils', () => {
  test('should convert HEIC to PNG', async () => {
    const file = new File([''], 'test.heic', { type: 'image/heic' });
    const base64 = await convertHeicToPng(file);
    expect(base64).toContain('data:image/png;base64');
  });
});

关键注意点 #

• 要匹配heic2any实际发送的消息格式：heic2any通常会发送包含type和buffer字段的消息，Mock时需对应处理。
• 若要测试错误场景，可在Mock Worker中触发onerror回调，模拟转换失败的情况。
• 确保Mock Worker的onmessage回调被正确触发，返回符合预期的Base64字符串。

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