@react-three/test-renderer
    TypeScript icon, indicating that this package has built-in type declarations

    7.0.24 • Public • Published

    React Three Test Renderer ⚛️🔼🧪

    Version Downloads Twitter Twitter Discord

    @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-three/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

    Keywords

    none

    Install

    npm i @react-three/test-renderer

    DownloadsWeekly Downloads

    496

    Version

    7.0.24

    License

    MIT

    Unpacked Size

    76.7 kB

    Total Files

    21

    Last publish

    Collaborators

    • farazshaikh
    • joergjaeckel
    • bjornstar
    • gsimone
    • giulioz
    • stephencorwin
    • dropthebeatbro
    • mlperego
    • sniok
    • iinfin
    • codynova
    • drcmda
    • marcofugaro
    • alaric.baraou
    • tdfka_rick
    • stockhuman
    • unframework