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?