How do you test a components that need a suspense like textures? Or components that uses context?

[dannyWoodford]

The issue I'm noticing is that if the component utilizes suspense to load textures the renderer.scene doesn't have children but if you were to remove the useTexture and the maps that use cloudsTexture you can access the children. I'm having a similar issue with components that use Context. I would imagine it's because, written like this, renderer.scene refers to the Suspense and not the Clouds like I'd hope.

Thanks!!!

___ Test ______________________

test("Clouds exist", async () => {
  const renderer = await ReactThreeTestRenderer.create(
    <Suspense fallback={null}>
      <Clouds />
    </Suspense>
  );

  console.log("renderer", renderer.scene.children[0]);
});

___ Clouds component ______________________

import { useRef } from "react";
import { earthRadius } from "satellite.js/lib/constants";
import { useTexture } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";

export default function Clouds() {
const cloudsRef = useRef();

const [cloudsTexture] = useTexture([
  process.env.PUBLIC_URL + "/earth-assets/earth-clouds-contrast.jpg",
]);

useFrame(() => {
  if (!cloudsRef.current) return;

  cloudsRef.current.rotation.z += 0.0002;
  cloudsRef.current.rotation.y += 0.00031;
});

return (
  <mesh
    ref={cloudsRef}
    name={"Clouds Mesh"}
  >
    <sphereGeometry args={[earthRadius + 20, 64, 64]} name={"Clouds Geo"} />
    <meshPhongMaterial
      name={"Clouds Material"}
      map={cloudsTexture}
      alphaMap={cloudsTexture}
      shininess={5}
      transparent={true}
      opacity={0.92}
    />
  </mesh>
);
}

[opeologist]

did you resolve this in any way? currently attempting to useTexture in a component and the scene's children is an empty array

[benrugg]

Would love to know the answer to this as well 🙏