ReferenceError: Request is not defined

[hducati]

What is your question:

Hey,

I have created a ModelView component to handle .glb files, and for that purpose, we're using useGLTF() hook. The component is working fine in our environment and the models are working as well.

But when I try to create the unit-test to test this component, I'm facing an unexpected issue.

ReferenceError: Request is not defined

      11 |   const { camera, scene: globalScene } = useThree();
      12 |
    > 13 |   const { scene } = useGLTF("/Shirt.glb", useDraco);
    

Unit test code:

jest.mock("scheduler", () => require("scheduler/unstable_mock"));

import { Suspense } from "react";
import ReactThreeTestRenderer from "@react-three/test-renderer";

import ModelView from "~/components/ModelView/ModelView";

const createSubject = () => {
  const model = {
    id: "shirt",
    url: "/Shirt.glb",
    position: "0, 0, 0",
    scale: "0",
  };

  return { model };
};

describe("ModelView", () => {
  it("should render component", async () => {
    const { model } = createSubject();

    const render = await ReactThreeTestRenderer.create(
      <Suspense fallback={null}>
        <ModelView model={model} useDraco={false} />
      </Suspense>
    );

    console.log(render.scene);
  });
});

Production code:

/* eslint-disable no-undef */
import { useMemo, useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { PointLight, AmbientLight, Vector3, Box3 } from "three";
import { useGLTF } from "@react-three/drei";

import { useTurntable } from "../../effects/useTurntable";

const ModelView = (props) => {
  const { model, isPresentationMode, useDraco = true } = props;
  const { camera, scene: globalScene } = useThree();

  const { scene } = useGLTF(model.url, useDraco);

  const { convertedScene, box, position } = useMemo(() => {
    const convertedScene = scene.clone();
    convertedScene.traverse((obj) => {
      if (obj.isMesh) {
        obj.layers.enable(2);
        obj.userData.model = model;
      }
    });
    const box = new Box3().setFromObject(convertedScene, 0.01);
    const center = new Vector3();
    box.getCenter(center);
    const size = new Vector3();
    box.getSize(size);
    const position = new Vector3().copy(center.clone().multiplyScalar(-1));
    return { convertedScene, box, position };
  }, [scene]);

  useEffect(() => {
    if (isPresentationMode) {
      const size = new Vector3();
      box.getSize(size);
      const maxSize = Math.max(size.x, size.y, size.z);
      camera.position.set(-maxSize, 0, 0);
      camera.rotation.set(0, 0, 0);
      camera.updateMatrixWorld();
      camera.updateProjectionMatrix();

      let light1 = new PointLight(0xffffff, maxSize * 0.3);
      light1.position.set(-maxSize, maxSize, 0);
      globalScene.add(light1);
      const light2 = new PointLight(0xffffff, maxSize * 0.3);
      light2.position.set(maxSize, maxSize, 0);
      globalScene.add(light2);
      const light3 = new AmbientLight(0xffffff, 0.15);
      globalScene.add(light3);
    }
    window.scene = globalScene;
  }, [scene]);

  const ref = useTurntable(!isPresentationMode);
  const scale = isPresentationMode ? 1 : model.scale;
  return (
    <primitive
      name={"model-" + model.id}
      object={convertedScene}
      ref={ref}
      position={isPresentationMode ? position : model.position}
      scale={[scale, scale, scale]}
    />
  );
};

export default ModelView;

My package.json:

    "@react-three/drei": "^8.18.10",
    "@react-three/fiber": "^7.0.26",
    "@react-three/test-renderer": "^7.0.25",

Thanks,

[FarazzShaikh]

As far as I’m aware Jest does not serve static assets like when using regular react. At least not by default.

[FarazzShaikh]

Converting this to a discussion as it is not an issue and unrelated to Drei