Jest + React Three Fiber + GLTFloader + Drei

[sly loom]

Has anyone experienced the errors (listed below) in React.js when running a Jest test which imports a GLTFloader:

https://pastebin.com/g31zvQJx

Is there a simple solution to this problem?

Any help would be amazing.

Thanks for your time.

Here are my dependencies and devdependencies:

"dependencies": {
"@react-three/drei": "^9.46.7",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.0",
"chart.js": "^3.9.1",
"framer-motion": "^8.5.4",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@react-three/test-renderer": "^8.0.17",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"babel-jest": "^29.3.1",
"eslint": "^8.34.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-n": "^15.6.1",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"jest": "^29.2.0",
"jest-fetch-mock": "^3.0.3",
"jest-watch-typeahead": "^2.2.0",
"prettier": "2.8.4",
"react-test-renderer": "^18.2.0"
}

[quasi peak]

I'd use three-stdlib which is where Drei will import from.

[sly loom]

@quasi peak thanks I will try this 🙂

[sly loom]

@quasi peak I've installed three-sdlib as you suggested but I'm still receiving the same error. I've updated the import GLTFloader path to

import { GLTFLoader } from "three-stdlib/loaders/GLTFLoader";

Thanks,

[quasi peak]

This would be import { GLTFLoader } from 'three-stdlib'

[sly loom]

Oh right