How to test components that use gltf files?

[JBudny]

Hi,

I'm trying to test a component created with gltfjsx.

I use the create-react-app and @react-three/test-renderer
My ./GLTFModels/Ground.gltf file is under the public directory.

My problem is that when I create the renderer and try to reach the renderer.scene.children value it returns me an empty array.

I think it's because the ./GLTFModels/Ground.gltf file isn't available in the testing environment, but I'm not sure about that. I tried the test debugging (CRA debugging-tests) and I couldn't find that file in the chrome dev tools. If that's the reason I'm not sure how to work around that.

I tried to test a basic mesh like the one below and also the manually copied useGLTF output from the Ground component and it seemed to work properly, but I don't think it's a good way to mock that object because it won't update automatically when I edit the gltf model in the future.

Is there a way of testing the components based on gltf files or maybe it's not the right thing to test?
I'm a beginner in that area and I probably make some mistakes that I'm not aware of so I could use a little hint 😅

Basic mesh I tested

<mesh>
	<boxBufferGeometry />
	<MeshStandardMaterial />
</mesh>

My Ground.tsx component

import { useGLTF } from '@react-three/drei'
import React, { useRef } from 'react'
import * as THREE from 'three'

import { GroundGLTFResult, GroundProps } from './Ground.types'

const path = './GLTFModels/Ground.gltf'

const Ground: React.FC<GroundProps> = ({ color, ...props }: GroundProps) => {
	const group = useRef<THREE.Group>()
	const { nodes, materials } = useGLTF(path) as GroundGLTFResult
	if (color) materials.GroundMaterial.color.set(color)

	return (
		<group ref={group} {...props} dispose={null}>
			<group name="Scene">
				<mesh
					name="Ground"
					castShadow
					receiveShadow
					geometry={nodes.Ground.geometry}
					material={materials.GroundMaterial}
				/>
			</group>
		</group>
	)
}

export default Ground

useGLTF.preload(path)

My Ground.test.tsx

import ReactThreeTestRenderer from '@react-three/test-renderer'
import React, { Suspense } from 'react'

import Ground from './Ground'

test('Ground component should change its color to the one provided as prop', async () => {
	const renderer = await ReactThreeTestRenderer.create(
		<Suspense fallback={null}>
			<Ground color="red" />
		</Suspense>
	)
	const mesh = renderer.scene.children

	// expect(mesh...
})

[drcmda]

'./GLTFModels/Ground.gltf' can never work, that is a relative path, bundlers would not know what to do with that. think of it like this, your bundler is creating a distributable, it takes everything you reference and puts it into the /dist folder or bundles it together. your ground.gltf does not exist there, and you don't give it any clue that you need it. simply doing fetch('./model.gltf') does nothing, because './model.gltf' is just a string. three's loaders are using plain fetch, ergo your bundler is clueless, builds the app and when you load that file's missing.

1. either put your model into /public and then refer to it absolutely "/models/name.gltf"
2. or put it somewhere under /src and refer to it by importing it with a relative path: import modelUrl from "./models/name.gltf" in which case it goes through url-loader. this also gives you real caching and compile time type safety, you won't run into a problem if the file's not there, you'd know immediately bc the app won't compile.

[joshuaellis]

This is how I wrote a test for useLoader when creating the test-renderer –

react-three-fiber/packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx

Line 50 in 72033d4

it('can handle useLoader hook', async () => {

You probably have to wait for it to appear in the scene, you're going straight in looking for it. But also IDK if GLTFLoader will load and parse in node, it won't throw an error, but it might not load. You should check the src it might require document to be there? 🤔

[drcmda]

threejs loaders do not work under node, they use browser api like xhrrequests. i misread the title - focussing too much on the loading, but no - testing gltfs imo is only possible with puppeteer.

@JBudny you can maybe use gltfjsx'es hacked gtlfloader https://github.com/pmndrs/gltfjsx these return the full stucture of the model without the actual binaries and textures. i would accept a pr to extend gltfjsx'es javascript api, currently it only exposes the parse function. but it could also export the loader, and in that case you could actually test without headless browsing.

[JBudny]

Thank you for your help. It took me a while but I did it.
I used the gltfjsx'es hacked gtlfLoader and opened a pr.
Hope you like it 😄

[drcmda]

yes, its awesome! thanks! i'll merge and publish later on.

[ashleymvanduzer]

Sorry to bother. Looking to implement this feature into a project, and curious about the details, but I can't seem to figure out how to use the alias properly. just wondering, in the example in the docs, what the loader in loader.parse refers to... is it the GLTFStructureLoader? and if so, how do you instantiate / use it? I keep getting an error when running that loader.parse is not a function, and I see the GLTFStructureLoader and parse are exports in the utils directory. How do you use them properly?

Many thanks!