如何在Jest TypeScript测试中使用OffscreenCanvas？

我有一个TypeScript类，其中包含一个指向OffscreenCanvas的实例变量：

foo.ts

export class Foo {
   private _canvas = new OffscreenCanvas(256, 256);
   // 其他代码
}

使用Jest测试该类时，测试代码如下：

import {describe, expect, test} from '@jest/globals';
import { Foo } from '../src/foo';

describe('foo module', function() {
    test('should test foo', () => {
        new Foo();
    });
});

通过ts-jest运行测试（执行命令npx jest）时，出现错误：

ReferenceError: OffscreenCanvas is not defined

      304 |
      305 | export class Foo {
    > 306 |     private _canvas = new OffscreenCanvas(256, 256);
          |                           ^
      307 | }
      308 |
      309 |

原因是测试在Node环境中运行，无法直接使用OffscreenCanvas这类浏览器特性。我想知道：能否不通过mock OffscreenCanvas实现测试？有没有集成node-canvas的方法？

已尝试的方法 #

• 安装@types/offscreencanvas并添加到tsconfig.json的types属性中：

...
"types": ["offscreencanvas"],
...

但没有效果。

• 使用jest-canvas-mock，同样无效。

可以通过node-canvas提供的OffscreenCanvas替代实现解决问题，步骤如下：

1. 安装依赖
   首先安装canvas包（即node-canvas）以及对应的类型声明：

npm install canvas --save-dev
npm install @types/canvas --save-dev

2. 配置Jest全局环境
   修改jest.config.ts（或jest.config.js），添加setupFilesAfterEnv配置指定全局初始化文件：

// jest.config.ts
export default {
  // 保留原有配置，新增或修改以下内容
  setupFilesAfterEnv: ['./jest.setup.ts'],
  preset: 'ts-jest',
  testEnvironment: 'node',
};

创建jest.setup.ts文件，将node-canvas的OffscreenCanvas挂载到全局对象：

// jest.setup.ts
import { OffscreenCanvas } from 'canvas';

// 让测试环境的全局对象识别OffscreenCanvas
(global as any).OffscreenCanvas = OffscreenCanvas;

3. 运行测试
   重新执行npx jest，此时Foo类中的new OffscreenCanvas()会使用node-canvas提供的实现，不再抛出ReferenceError。

补充说明 #

• node-canvas的OffscreenCanvas实现与浏览器原生API基本兼容，能覆盖大多数常规测试场景。
• 如果代码中用到了OffscreenCanvas的特殊API，可以先查看node-canvas的文档确认支持情况，若有缺失再针对性补充局部mock。

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