Add Jest and one environment package
Set testEnvironment in your Jest config
Use WebGPU or WebGL in a normal test
Read pixels back and check them
WebGPU through Dawn
Headless canvas,
pixels you can read.
navigator.gpu and every GPU* global are installed, with a headless canvas that three.js, Babylon Lite and vgpu accept. Both packages ship ESM and CommonJS builds.
import { createCanvas } from 'jest-environment-webgpu-node';
const canvas = createCanvas(256, 256);
const renderer = new THREE.WebGPURenderer({ canvas: canvas.asElement() });
await renderer.init();
await renderer.renderAsync(scene, camera);
const { width, height, data } = await canvas.readPixels();
it('renders', () => {
const canvas = document.createElement('canvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(64, 64, false);
renderer.render(scene, camera);
const gl = renderer.getContext();
const pixels = new Uint8Array(4);
gl.readPixels(32, 32, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
expect(pixels[3]).toBe(255);
});
WebGL 1 and 2
Existing WebGL code
works too.
document.createElement('canvas').getContext('webgl2') returns a GPU-backed context. Each test file gets a fresh document, Jest fake timers control animation frames, and canvases are released at teardown.
Keep reading
Find the part you need.
Install and first test
Getting started
Set up Jest with either environment and run a passing GPU test, in CommonJS or ESM.
Read more →jest-environment-webgpu-node
WebGPU
Dawn options, a headless canvas, and pixel readback for three.js, Babylon Lite and vgpu.
Read more →jest-environment-webgl-node
WebGL
WebGL 1 and 2 with a fresh DOM per test file, fake timers and automatic canvas cleanup.
Read more →No GPU needed
CI
Mesa llvmpipe and lavapipe packages and environment for GPU-less Linux runners.
Read more →Jest 29 and 30 · Node.js 22+ · MIT
From install to a passing GPU test.
pnpm add -D jest jest-environment-webgpu-node
Using Vitest? Try vitest-gpu.