@react-three/test-renderer v8.2.1
React Three Test Renderer ⚛️🔼🧪
react-three-test-renderer
is a React testing renderer for threejs in node.
yarn add react-three-fiber three
yarn add -D react-three-test-renderer
The problem
You've written a complex and amazing webgl experience using react-three-fiber
and you want to test it to make sure it works even after you add even more features.
You go to use react-dom
but hang on, THREE
elements aren't in the DOM! You decide to use react-test-renderer
you can see the container & the canvas but you can't see the tree for the scene!? That's because react-three-fiber
renders to a different react root with it's own reconciler.
The solution
You use react-three-test-renderer
⚛️-🔼-🧪, an experimental React renderer using react-three-fiber
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 ReactThreeTestRenderer from 'react-three-test-renderer'
const renderer = await ReactThreeTestRenderer.create(
<mesh>
<boxBufferGeometry args={[2, 2]} />
<meshStandardMaterial
args={[
{
color: 0x0000ff,
},
]}
/>
</mesh>,
)
// assertions using the TestInstance & Scene Graph
console.log(renderer.toGraph())
API
4 days ago
10 days ago
12 days ago
4 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago