用 Jest 模拟 Phaser答案

【问题标题】：mocking Phaser with Jest用 Jest 模拟 Phaser
【发布时间】：2020-04-21 08:33:25
【问题描述】：

我一直在尝试将 jest 设置为我正在处理的使用 Phaser 的项目的测试框架，但我在尝试模拟 Phaser 本身时遇到了困难。我第一次遇到this issue 缺少画布，我可以从链接中解决这个问题。但是现在我收到另一个错误“无法读取未定义的属性'位置'”。

jest.config.js：

module.exports = {
  verbose: true,
  roots: ['./src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy'
  },
  setupFiles: ['jest-canvas-mock']
}

__mocks__/phaser.js：

const phaser = jest.genMockFromModule('phaser');

module.exports = phaser;

错误信息：

TypeError: Cannot read property 'position' of undefined

      1 | 
    > 2 | const phaser = jest.genMockFromModule('phaser');
        |                     ^
      3 | 
      4 | module.exports = phaser;

      at Image.get [as x] (node_modules/phaser/src/physics/matter-js/components/Transform.js:36:30)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
      at Object.<anonymous> (src/__mocks__/phaser.js:2:21)
      at Object.<anonymous> (src/main.ts:3:1)
      at Object.<anonymous> (src/main.spec.ts:3:1)

我正在查看那个 Transform 文件以及它在 getter 上的爆炸，因为 this.body 是未定义的：

get: function ()
{
  return this.body.position.x;
},

还有其他人遇到过这个问题吗？我希望我只是有一些配置错误。

【问题讨论】：

标签： jestjs phaser-framework ts-jest

【解决方案1】：

感谢您分享使用 Phaser 3 运行 Jest 的配置。

关于您的问题，Phaser.Physics.Matter.Commponents.Trasnform 组件似乎与jest.genMockFromModule() 的工作方式并不真正兼容。

您可以简单地通过为phaser/src/physics/matter-js/components/Trasnform.js 中Transform 实例的body 属性创建一个默认值来破解它：

var Transform = {

    body: Body.create({}),

    // ...

虽然我不知道它会如何影响生产代码。

如果您不在游戏中使用 Matter.js 物理引擎，也许您可以创建一个 custom Phaser 3 build 来代替。

【讨论】：