在Jest中测试TS时创建WebGL上下文错误

Question

我试图在Jest的一个测试用例中初始化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:..Desktopphoenixnode_modulesjsdomlibjsdombrowsernot-implemented.js:9:17)
at HTMLCanvasElementImpl.getContext (C:..Desktopphoenixnode_modulesjsdomlibjsdomlivingnodesHTMLCanvasElement-impl.js:42:5)
at HTMLCanvasElement.getContext (C:..Desktopphoenixnode_modulesjsdomlibjsdomlivinggeneratedHTMLCanvasElement.js:131:58)
at getContext (C:..Desktopphoenixnode_modulesthreebuildthree.js:19279:29)
at new WebGLRenderer (C:..Desktopphoenixnode_modulesthreebuildthree.js:19315:10)
at Object.<anonymous> (C:..Desktopphoenixpackagesphoenix-event-displaysrctestsmanagersthree-managerrenderer-manager.test.ts:11:42)
at Promise.then.completed (C:..Desktopphoenixnode_modulesjest-circusbuildutils.js:391:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (C:..Desktopphoenixnode_modulesjest-circusbuildutils.js:316:10)
at _callCircusTest (C:..Desktopphoenixnode_modulesjest-circusbuildrun.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位)(队列:稳定)修订174年dbe6e33bc81994fceb71d751be201d0b4803d-refs/分公司主管/5005 _109@ {# 3}操作系统Windows 11 Version 21H2 (Build 22000.739)
JavaScript V8 10.2.154.8
User Agent Mozilla/5.0 (Windows NT 10.0;Win64;x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/102.0.0.0 Safari/537.36

chrome://gpu

WebGL: Hardware accelerated
WebGL2: Hardware accelerated
WebGPU: Hardware accelerated

提前感谢!:))

Answer 1

使用Jest测试WebGLRenderer的一个好方法是定义一个helper函数:

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/jest-three