Guides
Testing a Phaser canvas in Nuxt
Combine Nuxt runtime helpers, the shared fake Phaser runtime, and browser-mode smoke tests without replacing Nuxt test-utils.
@onmax/nuxt-phaser/testing stays thin on purpose. It wraps Nuxt's official runtime helpers instead of inventing a second test system.
Install the testing entrypoint
import {
mountSuspendedWithPhaser,
renderSuspendedWithPhaser,
withPhaserRuntimeConfig,
} from '@onmax/nuxt-phaser/testing'
Runtime test example
import { describe, expect, it } from 'vitest'
import { mountSuspendedWithPhaser } from '@onmax/nuxt-phaser/testing'
import NuxtPhaserGame from '#components/NuxtPhaserGame'
describe('NuxtPhaserGame', () => {
it('mounts with the shared fake runtime', async () => {
const wrapper = await mountSuspendedWithPhaser(NuxtPhaserGame, {
attrs: {
width: 320,
height: 180,
},
})
expect(wrapper.find('.phaser-game-host').exists()).toBe(true)
})
})
Runtime config helper
Use withPhaserRuntimeConfig() when a test needs the resolved runtimeConfig.public.phaser shape without booting the whole module:
import { withPhaserRuntimeConfig } from '@onmax/nuxt-phaser/testing'
const runtimeConfig = withPhaserRuntimeConfig({
clientOnly: false,
})
Browser-backed smoke tests
Use Vitest Browser Mode for a narrow slice of tests:
- real canvas mount
- keyboard and pointer plumbing
NuxtPhaserGameclient-only boundaries
Keep these tests small. They should prove browser behavior, not gameplay.
End-to-end tests
Keep Playwright as the final layer for:
- full gameplay loops
- claim and reward flows
- cross-page and network-backed scenarios
The Nuxt testing entrypoint is the mid-tier layer between pure unit tests and real end-to-end tests.