Test Mock for useSpline

[dsimonow]

Hi currently looking into Unittesting and useSpline is causing "SyntaxError: Cannot use import statement outside a module"

● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.
....

    Details:

    ...\node_modules\three\examples\jsm\loaders\DRACOLoader.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      11 |     const { nodes, materials } = useSpline('https://prod.spline.design/iIFqm1j5uG4GJWWv/scene.splinecode')
      12 |
    > 13 |
         | ^
      14 |     return (
      15 |         <>
      16 |             <Suspense fallback={<Text>Loading</Text>}>

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (node_modules/@splinetool/loader/build/SplineLoader.cjs:1996:75584)
      at Object.<anonymous> (node_modules/@splinetool/r3f-spline/dist/useSpline.cjs.js:1:40)
      at Object.<anonymous> (src/components/canvas/Scenario.tsx:13:59)
      at Object.<anonymous> (src/components/canvas/Scenario.stories.tsx:20:19)
      at Object.<anonymous> (src/components/canvas/Scenario.test.tsx:12:66)

in Jest.
Which probably is Jest just not accepting the loading.

I tried it with my useGLTF Mock for useSpline because both use the useLoader.

My current Mock setup looks like this:

import { mergeBufferGeometries, DRACOLoader } from 'three-stdlib'
jest.mock('three/examples/jsm/utils/BufferGeometryUtils.js', () => ({ mergeBufferGeometries }))
jest.mock('three/examples/jsm/loaders/DRACOLoader.js', () => ({ DRACOLoader }))
import ReactThreeTestRenderer from "@react-three/test-renderer"
import { composeStories } from '@storybook/react';
import * as stories from './Scenario.stories'
import * as Fiber from '@react-three/fiber';
import * as THREE from 'three'
import { GLTF} from 'three-stdlib';

type GLTFResult = GLTF & {
    nodes: Record<string, THREE.Object3D>;
    materials: Record<string, THREE.Material>;
};
const MockGLTFResult: GLTFResult = {
    animations: [],
    scene: new THREE.Group(),
    scenes: [],
    cameras: [],
    asset: {},
    parser: {} as any,
    userData: {},
    nodes: new Proxy(
        {},
        {
            get: (target, prop) => new THREE.Mesh()
        }
    ),
    materials: new Proxy(
        {},
        {
            get: (target, prop) => new THREE.MeshStandardMaterial()
        }
    )
};


test('Scenario Darstellung', async () => {
    jest.spyOn(Fiber, 'useLoader').mockImplementation(() => MockGLTFResult);
    const renderer = await ReactThreeTestRenderer.create(
        <ScenarioExample />
    )

    }
)

Update
Got it with extra help to this point.

 TypeError: object.traverse is not a function                                                                                                                                                 
                                                                                                                                                                                                 
       9 |                                                                                                                                                                                       
      10 | export function Scenario(...props) {                                                                                                                                                  
    > 11 |     const { nodes, materials } = useSpline('https://prod.spline.design/iIFqm1j5uG4GJWWv/scene.splinecode')
         |                                           ^
      12 |
      13 |
      14 |     return (

      at buildGraph (node_modules/@react-three/fiber/dist/index-8e3d9f5f.cjs.dev.js:503:12)
      at node_modules/@react-three/fiber/dist/index-8e3d9f5f.cjs.dev.js:1640:41
      at mountMemo (node_modules/react-reconciler/cjs/react-reconciler.development.js:8279:19)
      at Object.useMemo (node_modules/react-reconciler/cjs/react-reconciler.development.js:8739:16)
      at Object.useMemo (node_modules/react/cjs/react.development.js:1650:21)
      at Object.useGraph (node_modules/@react-three/fiber/dist/index-8e3d9f5f.cjs.dev.js:1640:27)
      at i (node_modules/@splinetool/r3f-spline/dist/useSpline.cjs.js:1:241)
      at Scenario (src/components/canvas/Scenario.tsx:11:43)
      at renderWithHooks (node_modules/react-reconciler/cjs/react-reconciler.development.js:7363:18)
      at mountIndeterminateComponent (node_modules/react-reconciler/cjs/react-reconciler.development.js:12327:13)
      at beginWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:13831:16)
      at beginWork$1 (node_modules/react-reconciler/cjs/react-reconciler.development.js:19513:14)
      at performUnitOfWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:18689:12)
      at workLoopSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18597:5)
      at renderRootSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18565:7)
      at recoverFromConcurrentError (node_modules/react-reconciler/cjs/react-reconciler.development.js:17948:20)
      at performConcurrentWorkOnRoot (node_modules/react-reconciler/cjs/react-reconciler.development.js:17848:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at recursivelyFlushAsyncActWork (node_modules/react/cjs/react.development.js:2633:9)
      at node_modules/react/cjs/react.development.js:2545:15

it can be resolved like this:

jest.mock('@splinetool/r3f-spline', () => ({
    __esModule: true,
    default: jest.fn(() => {
        // create a mock object for nodes
        const nodes = new Proxy({}, {
            get: (target, prop) => {
                // return a mock object for the requested node
                return {
                    // add any properties that you need to mock here
                    geometry: {/* mock geometry object */ }
                }
            }
        })

        // create a mock object for materials
        const materials = new Proxy({}, {
            get: (target, prop) => {
                // return a mock material for the requested material
                return {/* mock material object */ }
            }
        })

        // return the mock nodes and materials
        return { nodes, materials }
    })
}))