I messed around with the repository to try and add a testing framework.
I initially tried to setup vitest
but ran into issues not being able to mock require
calls, which causes some issues internally with Phaser when ran in a node environment.
Jest
I tried again with jest
and you can check out the branch here: https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-jest?expand=1.
It became larger than I intended because of the following issues:
yarn
v1 has a bug where in the dependency tree it installs a wrong version. Its the classic dependency of a dependency of a dependency problem, so its not easily fixed. The only workaround I found is to upgrade yarn to v3
or v4
.
- I had to add
canvas
additionally to jsdom
because even with the headless mode, Phaser still uses some API's when booting that require an actual implementation.
- a
__mocks__/phaser3spectorjs.js
is required because of a webpack DefinePlugin
quirk (phaserjs/phaser#6644)
- add a
props.config.banner
check for the Phavuer banner to not pollute the logs when running tests. See https://github.com/phaserjs/phaser/blob/v3.70.0/src/core/Config.js#L305
Note that the test emits the boot event
fails. This is because Phaser only emits that event async when the new Phaser()
constructor runs before DOMContentLoaded
emits. If it runs after, it will emit the boot
event sync (https://github.com/phaserjs/phaser/blob/master/src/dom/DOMContentLoaded.js#L27).
Therefore in Phavuer the lines:
<script>
const game = new Phaser.Game(Object.assign({ parent: canvasRoot.value }, props.config))
game.events.addListener('boot', () => {
context.emit('boot', game)
})
</script>
Will never actually catch the boot
event, because the event is emitted before the listener is attached. Since Phavuer is part of a Vue application, I doubt there will ever be an instance where the vue application is mounted before the DOMContentLoaded
event is emitted.
My suggestion would be to drop the boot
event. An alternative is to use the postBoot
callback (see https://newdocs.phaser.io/docs/3.60.0/Phaser.Types.Core.CallbacksConfig).
But in that case the boot
event will actually be emitted after the ready
event. see https://github.com/phaserjs/phaser/blob/v3.70.0/src/core/Game.js#L416-L434.
Could you check out the branch and see if this is a workable setup for tests? I might try another vitest
setup and see if I can avoid upgrading yarn
, but I think that might give more issues since it doesn't aim to support require
, and Phaser is very dependent on how require
works.
Vitest
With a lot of pain I setup vitest
here: https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-vitest?expand=1
This uses the experimental browser feature from vitest, which has your tests run in an actual browser.
This fixes so much pain with jsdom
and canvas
, so I think its miles better than using jest
with a jsdom
/canvas
setup.
The only ugly thing there was having to set string-width
to ^4.2.2
because of ESM issues deep in the dependency tree.