如何在PIXIJS应用单元测试中触发并传递交互事件？

实现方案 #

PIXI的事件系统基于Emitter，你只需要调用app.stage的emit方法，把创建好的模拟事件对象传入，就能触发对应的mousemove事件监听回调。

被测试代码 #

app.stage.on('mousemove', (moveData) => {
  if (!isDragging) {
    return;
  }
  // 此处为回调后续逻辑
});

单元测试代码 #

it('拖拽状态下应响应鼠标移动事件', () => {
  // 1. 创建并配置模拟交互事件
  const e = new PIXI.InteractionEvent();
  e.data = new PIXI.InteractionData();
  e.data.global.x = 10;
  e.data.global.y = 10;

  // 2. 设置拖拽状态为true，确保回调不会直接返回
  isDragging = true;

  // 3. 触发stage上的mousemove事件，传入模拟事件
  app.stage.emit('mousemove', e);

  // 4. 添加断言逻辑，验证回调内的操作是否执行
  // 示例：expect(targetValue).toBe(expectedValue);
});

it('非拖拽状态下应忽略鼠标移动事件', () => {
  const e = new PIXI.InteractionEvent();
  e.data = new PIXI.InteractionData();
  e.data.global.x = 10;
  e.data.global.y = 10;

  // 设置非拖拽状态
  isDragging = false;

  // 触发事件
  app.stage.emit('mousemove', e);

  // 断言回调逻辑未执行，可结合mock函数验证
  // 示例：expect(mockCallback).not.toHaveBeenCalled();
});

注意事项 #

• 确保测试环境中已正确初始化PIXI应用（app实例）和stage对象。
• 若isDragging是模块私有变量，需通过暴露接口或测试工具（如jest的jest.mock）来控制其状态。
• 如果回调涉及DOM操作或其他PIXI元素交互，需提前在测试中模拟或初始化这些依赖。

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