unit tests for animated mesh using '@react-three/test-renderer'

[nischaym]

Hello All,
below is my unit test file

// ignore the missing import of the component

import { Renderer } from '@react-three/test-renderer/dist/declarations/src/types/public';
import { waitFor } from '@testing-library/react';
import ReactThreeTestRenderer from '@react-three/test-renderer';

describe('box', () => {
  it('box mesh should render on the screen', async () => {
    const testBox = { x: 10, y: 10 ...}
    const renderer: Renderer = await ReactThreeTestRenderer.create(
      <Box {...testbox} />,
    );
    await renderer.advanceFrames(120, 10); // not entirely sure if i need this
    await waitFor(() => {
      const mesh = renderer.scene.children; // this is always an array of 0 

      expect(mesh.length).toBe(2);
    });
  });
});

and my component looks like

import { a } from '@react-spring/three';
import { useSpring } from '@react-spring/core';

const Box = () => { 
.
.
.
const { newX, newY, newRotation } = useSpring({
    from: {
      newX: prev.current[0],
      newY: prev.current[1],
      newRotation: prevR.current,
    },
    to: {
      newX: latest.current[0],
      newY: latest.current[1],
      newRotation: latestR.current,
    },
    config: key => {
      switch (key) {
        .
        .
        .
      }
    },
  });
}

return ( <a.mesh
      position-x={newX}
      position-y={newY}
      position-z={BoxProperties.z}
      name={name}
    >
      <a.mesh
        onClick={() => handleClick()}
        rotation-z={newRotation}
      >
        <RoundedBox
          args={[
            boxProperties.width,
            boxProperties.height,
            boxProperties.depth,
          ]}
          radius={boxProperties.radius}
        >
          <meshStandardMaterial attach="material" color={'red'} />
        </RoundedBox>
      </a.mesh>
    </a.mesh>
    )

the component functions as expected but I am trying to write simple unit tests and the
renderer.scene.children is always an array of 0.
Also, i believe I need "wait" for the spring to do its job and hence using waitFor.

can someone point me to the right direction ?

PS: the application itself is super simple @react-three/fiber app i.e it is not super customized.

[CodyJasonBennett]

You might need to use act which will wait for all effects and async ops to finish.

await act(async () => {
  // render JSX here
})

expect(renderer.scene.children.length).toBe(2)

[nischaym]

still the same issue

import { act, waitFor } from '@testing-library/react';


it('Box should render on the screen', async () => {
     const testBox = { x: 10, y: 10 ...}
    let renderer: Renderer;
    await act(async () => {
      renderer = await ReactThreeTestRenderer.create(
        <Box {...testBox} />,
      );
    });

    // @ts-ignore
    console.log(renderer.scene.children);

    await waitFor(() => {
      const mesh = renderer.scene.children;
      expect(mesh.length).toBe(0);
    });
  });

[opeologist]

any update on this or resolution? i'm running into the same problem attempting to use useTexture in a component and the children are coming back empty as well. any insights to resolution would be greatly appreciated. thanks!

[TeoAvignon]

I have unable to get children when using useTexture do. Have you solved the issue?

[NeuroNexusAI]

It looks like the issue might be that the animated mesh isn’t fully rendered when the test runs. Since useSpring adds animations, the scene might not update instantly. You could try adding a longer wait time or ensuring the animation has fully settled before making assertions.
For more insights on unit testing animated components in React Three Fiber, check out suraheyaseen.com—they cover similar challenges and solutions in depth. Hope this helps! 🚀