如何Mock嵌套方法？Jasmine单元测试技术求助

嘿，作为JavaScript和单元测试的新手，刚上手Jasmine和Phaser时卡在嵌套方法Mock上太正常了——我当初也在这绕了好几个弯！咱们一步步拆解怎么搞定绘制矩形的测试，把嵌套调用的Mock捋清楚。

首先，先明确Phaser里绘制矩形的典型链式调用逻辑，比如你可能会写：

// 示例：在Phaser场景里绘制填充矩形
this.add.graphics()
  .fillStyle(0xff0000)
  .fillRect(10, 20, 100, 50);

这里的this.add.graphics()返回一个Graphics对象，接着调用它的fillStyle和fillRect方法，这就是典型的嵌套/链式调用，我们需要把这一整条链都Mock起来。

步骤1：创建Graphics对象的Mock #

我们需要先模拟出Phaser的Graphics对象，包含所有你用到的绘制方法。用Jasmine的createSpyObj可以一次性创建带多个方法的模拟对象：

// 创建带有fillStyle、fillRect方法的Graphics Mock
const mockGraphics = jasmine.createSpyObj('Graphics', ['fillStyle', 'fillRect', 'strokeRect']);

这里的第一个参数是Mock的名称（方便测试失败时看日志），第二个参数是需要Mock的方法名数组，把你用到的绘制相关方法都加进去就行。

步骤2：Mock上层的add.graphics()调用 #

接下来要让this.add.graphics()返回我们刚才创建的Mock对象，这样后续的链式调用就会落到Mock上。假设你是在Phaser场景里写的绘制逻辑，测试时可以这样Spy：

beforeEach(() => {
  // 重置Mock，避免测试用例互相干扰
  mockGraphics = jasmine.createSpyObj('Graphics', ['fillStyle', 'fillRect']);
  // Mock场景的add.graphics()方法，返回我们的Mock对象
  spyOn(yourScene.add, 'graphics').and.returnValue(mockGraphics);
});

如果你的绘制逻辑是在自定义的游戏组件里，就把yourScene.add换成组件对应的对象即可。

步骤3：编写测试用例并验证调用 #

现在可以调用你要测试的绘制方法，然后验证Mock方法是否被正确调用：

it('should draw a red filled rectangle with correct dimensions', () => {
  // 调用你的绘制方法
  yourScene.drawPlayerHitbox(10, 20, 100, 50);

  // 验证fillStyle是否用正确的颜色值调用
  expect(mockGraphics.fillStyle).toHaveBeenCalledWith(0xff0000);
  // 验证fillRect是否传入了正确的坐标和尺寸参数
  expect(mockGraphics.fillRect).toHaveBeenCalledWith(10, 20, 100, 50);
  // 如果需要验证调用顺序，比如先设置样式再绘制
  expect(mockGraphics.fillStyle).toHaveBeenCalledBefore(mockGraphics.fillRect);
});

新手容易踩的坑 #

• Mock对象要精准：一定要确认你Spy的是实际代码中用到的对象，比如如果是this.add.graphics()，就不能误写成spyOn(Phaser.GameObjects.Graphics, 'fillRect')，那样根本不会生效。
• 重置Mock：记得在beforeEach里重新创建Mock或者调用mock.calls.reset()，不然上一个测试用例的调用记录会影响下一个。
• 不要Mock不需要的方法：只Mock你测试逻辑里用到的方法，比如如果只用到fillRect，就不用加strokeRect，保持Mock简洁。

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