错误在开玩笑中测试TS时创建WebGL上下文

Question

我试图在玩笑中的一个测试用例中初始化WebGlrenderer。但是，每当我执行该测试案例时，我都会受到此错误的欢迎：

 Error creating WebGL context.                                                                                                                
                                                                                                                                                 
       9 |                                                                                                                                       
      10 |   it('should set the main renderer', () => {                                                                                          
    > 11 |     const webglRenderer: WebGLRenderer = new WebGLRenderer({
         |                                          ^
      12 |       antialias: true,
      13 |       alpha: true,
      14 |       powerPreference: 'high-performance',

      at new WebGLRenderer (../../node_modules/three/build/three.js:19318:13)
      at Object.<anonymous> (src/tests/managers/three-manager/renderer-manager.test.ts:11:42)

我正在测试TS，但没有看到任何编译时间错误。

完整堆栈跟踪：

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
        at module.exports (C:\..\Desktop\phoenix\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
        at HTMLCanvasElementImpl.getContext (C:\..Desktop\phoenix\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
        at HTMLCanvasElement.getContext (C:\..\Desktop\phoenix\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:131:58)
        at getContext (C:\..Desktop\phoenix\node_modules\three\build\three.js:19279:29)
        at new WebGLRenderer (C:\..Desktop\phoenix\node_modules\three\build\three.js:19315:10)
        at Object.<anonymous> (C:\..\Desktop\phoenix\packages\phoenix-event-display\src\tests\managers\three-manager\renderer-manager.test.ts:11:42)
        at Promise.then.completed (C:\..Desktop\phoenix\node_modules\jest-circus\build\utils.js:391:28)
        at new Promise (<anonymous>)
        at callAsyncCircusFn (C:\..Desktop\phoenix\node_modules\jest-circus\build\utils.js:316:10)
        at _callCircusTest (C:\..\Desktop\phoenix\node_modules\jest-circus\build\run.js:218:40) undefined

      at VirtualConsole.<anonymous> (../../node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (../../node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at HTMLCanvasElementImpl.getContext (../../node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
      at HTMLCanvasElement.getContext (../../node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:131:58)
      at getContext (../../node_modules/three/build/three.js:19279:29)
      at new WebGLRenderer (../../node_modules/three/build/three.js:19315:10)

Google Chrome 102.0.5005.115（官方构建）（64位）（队列：稳定） 修订版174DBE6E33BC81994FCEB71D751BE201D0B4803D-REFS/branch-heads/5005_109@{＃3} OS Windows 11版本21H2（构建22000.739）
JavaScript V8 10.2.154.8
用户代理Mozilla/5.0（Windows NT 10.0; Win64; X64）AppleWebkit/537.36（Khtml，像Gecko一样）
Chrome/102.0.0.0 Safari/537.36

Chrome：// GPU

WebGL：硬件加速
WebGL2：硬件加速
WebGPU：硬件加速了，

谢谢！ :)）

Answer 1

使用JEST测试WebGlrenderer的一种好方法是定义辅助功能：

import createContext from 'gl';

import * as THREE from 'three';
import { createCanvas } from 'canvas';

export default function createRenderer(
  options?: THREE.WebGLRendererParameters
) {
  const window = {
    innerWidth: 800,
    innerHeight: 600,
  };
  const context = createContext(1, 1);
  const canvas: HTMLCanvasElement = createCanvas(
    window.innerWidth,
    window.innerHeight
  ) as any;

  // Mock function to avoid errors inside THREE.WebGlRenderer():
  canvas.addEventListener = function () {};

  return new THREE.WebGLRenderer({ context, canvas, ...options });
}

希望它有帮助。我从这个库中汲取了灵感： https：//github.com/bartozzz/bartozzz/jest-three