mountScene

mountScene() is for testing view components that render a Pixi display object (Sprite, Container, Text, etc.). It mounts JSX in a temporary Solid root, resolves it to a real Pixi node, and returns the root Container.

type MountSceneResult<TRoot = Pixi.Container> = {
  container: TRoot;
  dispose: () => void;
};

The returned container is the root PixiJS node — no ref callback is needed to access it.

Basic usage

import { Container, Sprite } from "pixi-solid";
import { mountScene, getByLabel } from "pixi-solid/testing";

const { container, dispose } = mountScene(() => (
  <Container label="scene">
    <Sprite label="player" x={100} />
  </Container>
));

// Container is Pixi.Container — directly accessible
container.x;

// Query children by label
const player = getByLabel(container, "player");
expect(player.x).toBe(100);

dispose();

Non-Container roots

For component types other than Pixi.Container, specify the type via the generic parameter:

const { container } = mountScene<Pixi.AnimatedSprite>(() => (
  <AnimatedSprite textures={textures} playing />
));
container.playing; // typed as Pixi.AnimatedSprite

When to use

• Testing view components that render a Pixi display object
• You need to inspect the rendered scene graph
• You want to query children by label with getByLabel / queryByLabel

For testing stores or hooks that don't render a scene, use createTestRoot instead.

With context (onTick, onResize, etc.)

Wrap your component in createTestContext().Provider to provide a mock ticker (stopped, manually controlled), renderer, and app context:

import { mountScene, createTestContext } from "pixi-solid/testing";
import { Container, Sprite, onTick } from "pixi-solid";

const ctx = createTestContext();
let calls = 0;

mountScene(() => (
  <ctx.Provider>
    <Container>
      {onTick(() => { calls++; })}
      <Sprite x={100} />
    </Container>
  </ctx.Provider>
));

// Advance frames with the manual ticker
ctx.ticker.fastForwardFrames(5);
expect(calls).toBe(5);