Jest测试Ant Design Pie图表遇Worker未定义/非构造函数错误求助

问题背景 #

开发集成Ant Design Charts的CRM应用，在测试Pie组件执行npm run test时遇到以下问题：

• 初始错误：TypeError: URL.createObjectURL is not a function，已通过在testSetupFile.js添加模拟代码修复：

  Object.defineProperty(URL, 'createObjectURL', {
    writable: true,
    value: jest.fn(),
  })
  

• 修复后新错误：ReferenceError: Worker is not defined，尝试模拟Worker后又出现Worker is not a constructor错误
• 需求仅为验证组件能否正常渲染，已尝试引入jsdom-worker但问题未解决

测试代码如下：

import '@testing-library/jest-dom'
import PageThatContainsPie from './PageThatContainsPie'

describe('Pie Test', () => {
  test('it should mount', () => {
    const { container } = render(<PageThatContainsPie />)
  })
})

解决方案 #

方法1：全局配置文件中模拟Worker #

在testSetupFile.js中补充Worker的模拟代码，完整覆盖所需的Worker接口：

// 已有的URL.createObjectURL模拟
Object.defineProperty(URL, 'createObjectURL', {
  writable: true,
  value: jest.fn(),
});

// 模拟Worker构造函数及核心方法
class MockWorker {
  constructor(workerUrl) {
    this.url = workerUrl;
    this.onmessage = null;
    this.onerror = null;
  }

  postMessage(message) {
    // 可选：模拟Worker消息回调，若组件依赖返回值可自定义
    if (typeof this.onmessage === 'function') {
      this.onmessage({ data: 'mock worker response' });
    }
  }

  terminate() {
    // 模拟终止方法，空实现即可
  }
}

// 将MockWorker挂载到全局对象
Object.defineProperty(global, 'Worker', {
  writable: true,
  value: MockWorker,
});

方法2：单个测试文件内局部模拟 #

如果不需要全局生效，可在测试文件顶部直接添加Worker模拟：

import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import PageThatContainsPie from './PageThatContainsPie';

// 定义MockWorker类
class MockWorker {
  constructor() {
    this.onmessage = jest.fn();
    this.onerror = jest.fn();
  }
  postMessage = jest.fn();
  terminate = jest.fn();
}

// 覆盖全局Worker
global.Worker = MockWorker;

describe('Pie Test', () => {
  test('it should mount', () => {
    const { container } = render(<PageThatContainsPie />);
    // 增加断言确保组件渲染成功
    expect(container).toBeInTheDocument();
  });
});

方法3：针对性模拟图表依赖的Worker模块 #

如果上述方法无效，可能是Ant Design Charts内部直接引入了特定的Worker文件，可通过jest.mock精准模拟该模块：

// 替换为实际的Worker文件路径，比如图表库内部的worker文件
jest.mock('@ant-design/charts/es/pie/xxx.worker.js', () => {
  return class MockWorker {
    constructor() {
      this.onmessage = jest.fn();
    }
    postMessage = jest.fn();
  };
});

// 后续测试代码不变
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import PageThatContainsPie from './PageThatContainsPie';

describe('Pie Test', () => {
  test('it should mount', () => {
    const { container } = render(<PageThatContainsPie />);
    expect(container).toBeInTheDocument();
  });
});

说明 #

因为你的需求仅为验证组件渲染，无需Worker执行实际逻辑，所以通过模拟Worker的构造函数和必要方法即可绕过环境缺失问题。jsdom-worker可能因版本兼容或配置问题未生效，直接全局模拟是更简单直接的方案。

内容的提问来源于stack exchange，提问作者Baran Öden