Hi,
I’m currently writing unit tests for my app and am running into some issues getting the models to load. Here is what I’m trying to achieve:
import React from 'react';
import ReactThreeTestRenderer from '@react-three/test-renderer';
import { useGLTF } from '@react-three/drei';
import MyComponent from './MyComponent';
let model;
beforeAll(() => {
model = useGLTF('my_model.gltf').nodes;
});
test('mesh to have one child', async () => {
const renderer = await ReactThreeTestRenderer.create(<MyComponent model={model} />);
const mesh = renderer.scene.children[0].allChildren;
expect(mesh.length).toBe(1);
});
Running this test yields the output of:
FAIL src/components/MyComponent.test.js
✕ mesh to have one child (1 ms)
● mesh to have one child
thrown: Promise {}
6 | let model;
7 |
> 8 | beforeAll(() => {
| ^
9 | model = useGLTF('my_model.gltf').nodes;
10 | });
11 |
at Object.<anonymous> (src/components/MyComponent.test.js:8:1
I tried using useLoader
, but got similar results.
For context, MyComponent
in this example is the component that takes the loaded model as a prop and applies various mesh properties and methods to it, rendering it in the process. For various reasons, useGLTF
is not called inside MyComponent
. Rather, it is called in a separate function that loads other models as well.
I tried many iterations, but couldn’t get anything to work. I worst comes to worst, I can always just fallback on a default Sphere or something as the model to be passed, but mainly curious as to why an approach like this is not working.
Thanks!