Guides
Testing scene primitives in Vue
Use the fake Phaser runtime and the Vue mount helper to test scene wiring without a real renderer.
@onmax/phaser-vue/testing is the default testing layer for Vue component and composable tests.
It gives you:
- a deterministic fake Phaser runtime
- a Vue Test Utils mount helper that installs
createPhaserVue() - a harness for inspecting created games, scenes, and game objects
Install the testing entrypoint
import { createFakeSceneDefinition, mountPhaser } from '@onmax/phaser-vue/testing'
Example
import { defineComponent, h } from 'vue'
import { describe, expect, it } from 'vitest'
import { PhaserGame, PhaserScene } from '@onmax/phaser-vue'
import { createFakeSceneDefinition, mountPhaser } from '@onmax/phaser-vue/testing'
const scene = createFakeSceneDefinition({
key: 'spec-scene',
create({ scene }) {
scene.add.text(16, 24, 'ready')
},
})
describe('scene host', () => {
it('creates the managed scene and primitive objects', () => {
const wrapper = mountPhaser(defineComponent({
setup() {
return () => h(PhaserGame, { width: 320, height: 180 }, {
default: () => h(PhaserScene, { sceneKey: scene.key, definition: scene }),
})
},
}))
expect(wrapper.harness.getGames()).toHaveLength(1)
expect(wrapper.harness.getScenes()).toHaveLength(1)
expect(wrapper.harness.getObjects()).toHaveLength(1)
})
})
When to use this layer
Use the fake runtime when you want to verify:
- scene registration
- bridge wiring
- primitive props and patching
- registry events
- component lifecycle and expose contracts
Do not use it to prove real renderer behavior, pointer plumbing, or browser-only client boundaries. That belongs in browser-mode smoke tests.