Vue Three Test Renderer

@bluera/vue-threejs-test-renderer is a Vue testing renderer for threejs in node.

yarn add @bluera/vue-threejs three
yarn add -D @bluera/vue-threejs-test-renderer

The problem

You've written a complex and amazing webgl experience using @bluera/vue-threejs and you want to test it to make sure it works even after you add even more features.

You go to use vue-test-utils but hang on, THREE elements aren't in the DOM! You decide to use @bluera/vue-threejs-test-renderer you can see the container & the canvas but you can't see the tree for the scene!? That's because @bluera/vue-threejs renders to a different root with it's own reconciler.

The solution

You use @bluera/vue-threejs-test-renderer, an experimental Vue renderer using @bluera/vue-threejs under the hood to expose the scene graph wrapped in a test instance providing helpful utilities to test with.

Essentially, this package makes it easy to grab a snapshot of the Scene Graph rendered by three without the need for webgl & browser.

Usage

RTTR is testing library agnostic, so we hope that it works with libraries such as jest, jasmine etc.

import VueThreeTestRenderer from '@bluera/vue-threejs-test-renderer'

const renderer = await VueThreeTestRenderer.create(
  <mesh>
    <boxGeometry args={[2, 2]} />
    <meshStandardMaterial
      args={[
        {
          color: 0x0000ff,
        },
      ]}
    />
  </mesh>,
)

// assertions using the TestInstance & Scene Graph
console.log(renderer.toGraph())

API

• Vue Three Test Renderer API
• Vue Three Test Instance API