Vitest测试Pixi.js组件时WebGLRenderingContext未定义问题

在使用Vitest测试基于Pixi.js开发的RessourcesManager组件时，4个测试用例全部失败，报错信息为ReferenceError: WebGLRenderingContext is not defined，错误触发点为初始化Pixi.js的Renderer实例时。相关信息如下：

错误日志 #

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ 失败测试用例 4 个 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
 FAIL  src/game/managers/Ressources/Ressources.m.test.ts > RessourcesManager > 应正确初始化       
 FAIL  src/game/managers/Ressources/Ressources.m.test.ts > RessourcesManager > 应加载场景数据
 FAIL  src/game/managers/Ressources/Ressources.m.test.ts > RessourcesManager > 应按类别查找纹理  
 FAIL  src/game/managers/Ressources/Ressources.m.test.ts > RessourcesManager > 应从数据库获取纹理  
ReferenceError: WebGLRenderingContext is not defined
 ❯ Object.getWebGLRenderingContext node_modules/@pixi/settings/src/adapter.ts:38:25
 ❯ new ScissorSystem node_modules/@pixi/core/src/mask/ScissorSystem.ts:41:6
 ❯ Renderer.addSystem node_modules/@pixi/core/dist/esm/core.mjs:9349:22
 ❯ new Renderer node_modules/@pixi/core/src/Renderer.ts:314:9
 ❯ src/game/managers/Ressources/Ressources.m.test.ts:10:20
      8| 
      9|  beforeEach( () => {
     10|   const renderer = new Renderer();
       |                    ^
     11|   ressourcesManager = new RessourcesManager( renderer ); // 向构造函数传入所需参数
     12|  });

Vite配置 #

/// <reference types="vitest" />
import path from 'path';

// import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

// https://vitejs.dev/config/

export default defineConfig({
    logLevel: 'error',
    css:{
        devSourcemap: true,
    },
    plugins: [
        tsconfigPaths(),
    ],

    ssr: {
        noExternal:true, // 性能相关？
        // noExternal: /^(?!.*\/vitest\/).*$/,
    },
    test: {
        globals: true,

        // setupFiles: ['./vitest.setup.ts'],
        environment: 'jsdom',

        // environment: 'happy-dom',
        server: {
            deps: {
                inline:[/^(?!.*vitest).*$/],

            }
        },

        deps:{
            optimizer: {
                web: {
                    include: ['vitest-canvas-mock'],
                },
            },
        }

    },

    build: {
        target: 'esnext',
        sourcemap: true,
        minify: false,
        cssMinify: false,

    },

    optimizeDeps: {
        esbuildOptions: {
            keepNames: true,
        },
    },
    server: {

        watch: {
            ignored: [
                path.resolve( __dirname, 'src/game/actionscripts/index.ts' ),
            ]
        }
    },
    experimental:{

    },
    resolve: {
        // 别名配置已注释
    },
});

最简测试示例 #

import { RessourcesManager } from './Ressources.m';
import { Renderer } from 'pixi.js'; // 导入WebGL或Canvas降级版本

describe( 'RessourcesManager', () => {
    let ressourcesManager: RessourcesManager;

    beforeEach( () => {
        const renderer = new Renderer({ width: 800, height: 600 });
        ressourcesManager = new RessourcesManager( renderer );
    });

    describe( 'getTexture', () => {
        it( '应包含renderer实例', () => {
            expect( ressourcesManager['renderer']).toBeDefined( );
        });
    });
});

1. 安装必要的模拟依赖 #

执行命令安装依赖：

npm install -D vitest-canvas-mock @pixi/test-utils

2. 创建并配置Vitest初始化文件 #

在项目根目录创建vitest.setup.ts，添加以下内容：

import 'vitest-canvas-mock';
import { setupPIXI } from '@pixi/test-utils';

// 初始化Pixi测试环境
setupPIXI();

// 全局模拟WebGLRenderingContext核心方法
global.WebGLRenderingContext = class {
    getExtension() { return null; }
    createBuffer() { return {}; }
    bindBuffer() {}
    bufferData() {}
    createProgram() { return {}; }
    createShader() { return {}; }
    shaderSource() {}
    compileShader() {}
    attachShader() {}
    linkProgram() {}
    useProgram() {}
    getUniformLocation() { return null; }
    uniformMatrix4fv() {}
    enableVertexAttribArray() {}
    vertexAttribPointer() {}
    drawArrays() {}
};

然后修改Vite配置，启用该初始化文件：

test: {
    globals: true,
    setupFiles: ['./vitest.setup.ts'], // 启用初始化文件
    environment: 'jsdom',
    // 保留原有其他配置
}

3. 改用Pixi测试工具创建Renderer #

修改测试用例，使用@pixi/test-utils提供的createRenderer方法替代直接实例化Renderer：

import { RessourcesManager } from './Ressources.m';
import { createRenderer } from '@pixi/test-utils';

describe( 'RessourcesManager', () => {
    let ressourcesManager: RessourcesManager;

    beforeEach( () => {
        const renderer = createRenderer({ width: 800, height: 600 });
        ressourcesManager = new RessourcesManager( renderer );
    });

    describe( 'getTexture', () => {
        it( '应包含renderer实例', () => {
            expect( ressourcesManager['renderer']).toBeDefined( );
        });
    });
});

4. 调整依赖优化配置 #

在Vite配置的test.deps中添加@pixi/test-utils：

test: {
    deps:{
        optimizer: {
            web: {
                include: ['vitest-canvas-mock', '@pixi/test-utils'],
            },
        },
    }
}

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