Phaser-CE项目Jest测试报错：ReferenceError: PIXI is not defined

问题背景 #

项目使用Phaser-CE 2.20.0（因需求限制无法升级），运行Jest测试时出现如下报错：

ReferenceError: PIXI is not defined

      1 | import 'pixi';
      2 | import 'p2';
    > 3 | import Phaser from 'phaser';
        | ^
      4 |
      5 | export function createGame() {
      6 |     const game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload, create, update });

      at Object.<anonymous> (node_modules/phaser-ce/build/custom/phaser-split.js:563:11)
      at Object.require (src/game.js:3:1)
      at Object.require (test/game.test.js:1:1)

原因是Phaser-CE的split构建版本依赖全局作用域中的PIXI和p2对象，但Jest测试环境默认不会自动注入这些全局变量。

解决方案 #

方案1：通过Jest前置脚本加载依赖 #

1. 在项目根目录创建jest.setup.js文件，内容如下：

import 'pixi';
import 'p2';

2. 修改jest.config.js，添加setupFiles配置，让Jest在测试前执行该脚本：

module.exports = {
  // 其他原有配置...
  setupFiles: ['./jest.setup.js']
};

此方法会实际加载pixi和p2依赖，确保Phaser能找到全局的PIXI对象。

方案2：手动将依赖挂载到全局作用域 #

修改src/game.js的导入逻辑，将PIXI和p2挂载到window（Jest测试环境中window会被自动模拟）：

import * as PIXI from 'pixi';
import * as p2 from 'p2';
import Phaser from 'phaser';

// 手动挂载到全局，满足Phaser的依赖要求
window.PIXI = PIXI;
window.p2 = p2;

export function createGame() {
    const game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload, create, update });
    // 剩余业务代码...
}

方案3：全局模拟PIXI和p2（轻量替代） #

如果不需要实际运行Phaser的渲染逻辑，仅需通过测试检查代码结构，可以在jest.config.js中直接模拟全局变量：

module.exports = {
  // 其他原有配置...
  globals: {
    PIXI: {},
    p2: {}
  }
};

注意：此方案仅适用于简单测试场景，若测试中涉及Phaser的具体API调用，可能需要补充更完整的模拟对象。

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