[v9] chore(tests): cleanup test config, harden previous renderer tests (#2491)

Author: CodyJasonBennett

.github/workflows/test.yml

@@ -33,7 +33,7 @@ jobs:
         run: yarn run build
 
       - name: Jest run
-        run: yarn run test
+        run: yarn run dev && yarn run test
 
       - name: Report Fiber size
         run: yarn run analyze-fiber

jest.config.js

@@ -22,5 +22,5 @@ module.exports = {
   moduleFileExtensions: ['js', 'ts', 'tsx'],
   verbose: false,
   testTimeout: 30000,
-  setupFilesAfterEnv: ['<rootDir>/packages/shared/setupTests.ts', '<rootDir>/packages/fiber/tests/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/packages/shared/setupTests.ts'],
 }

packages/fiber/__mocks__/expo-file-system.ts

@@ -1,11 +1,14 @@
 import * as React from 'react'
-import { createWebGLContext } from '@react-three/test-renderer/src/createWebGLContext'
+import type { GLViewProps, ExpoWebGLRenderingContext } from 'expo-gl'
+
+export function GLView({ onContextCreate }: GLViewProps) {
+  const canvas = React.useMemo(() => Object.assign(document.createElement('canvas'), { width: 1280, height: 800 }), [])
 
-export const GLView = ({ onContextCreate }: { onContextCreate: (gl: any) => void }) => {
   React.useLayoutEffect(() => {
-    const gl = createWebGLContext({ width: 1280, height: 800 } as HTMLCanvasElement)
-    onContextCreate(gl)
-  }, [])
+    const gl = canvas.getContext('webgl2') as ExpoWebGLRenderingContext
+    gl.endFrameEXP = () => {}
+    onContextCreate?.(gl)
+  }, [canvas, onContextCreate])
 
   return null
 }

packages/fiber/__mocks__/expo-gl.ts

@@ -1,2 +1,4 @@
-const mock = {}
-export default mock
+export default class {
+  getEventHandlers = () => ({})
+  reset() {}
+}

packages/fiber/__mocks__/react-native/Libraries/Pressability/Pressability.ts

@@ -2,29 +2,26 @@ import * as React from 'react'
 import { ViewProps, LayoutChangeEvent } from 'react-native'
 
 // Mocks a View or container as React sees it
-const Container = React.memo(
-  React.forwardRef(({ onLayout, ...props }: ViewProps, ref) => {
-    React.useLayoutEffect(() => {
-      onLayout?.({
-        nativeEvent: {
-          layout: {
-            x: 0,
-            y: 0,
-            width: 1280,
-            height: 800,
-          },
+class NativeContainer extends React.Component<ViewProps> {
+  componentDidMount(): void {
+    this.props.onLayout?.({
+      nativeEvent: {
+        layout: {
+          x: 0,
+          y: 0,
+          width: 1280,
+          height: 800,
         },
-      } as LayoutChangeEvent)
+      },
+    } as LayoutChangeEvent)
+  }
 
-      ref = { current: { props } }
-    }, [])
-
-    return null
-  }),
-)
+  render() {
+    return this.props.children
+  }
+}
 
-export const View = Container
-export const Pressable = Container
+export const View = NativeContainer
 
 export const StyleSheet = {
   absoluteFill: {
@@ -35,3 +32,9 @@ export const StyleSheet = {
     bottom: 0,
   },
 }
+
+export const PixelRatio = {
+  get() {
+    return 1
+  },
+}

packages/fiber/__mocks__/react-native/index.ts

@@ -1,48 +1,43 @@
 import * as React from 'react'
 import { View } from 'react-native'
-import { act, create, ReactTestRenderer } from 'react-test-renderer'
-
-import { Canvas } from '../../src/native'
+import { create } from 'react-test-renderer'
+import { Canvas, act } from '../src/native'
 
 describe('native Canvas', () => {
   it('should correctly mount', async () => {
-    let renderer: ReactTestRenderer = null!
-
-    await act(async () => {
-      renderer = create(
+    const renderer = await act(async () =>
+      create(
         <Canvas>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
-    expect(renderer.toTree()).toMatchSnapshot()
+    expect(renderer.toJSON()).toMatchSnapshot()
   })
 
   it('should forward ref', async () => {
     const ref = React.createRef<View>()
 
-    await act(async () => {
+    await act(async () =>
       create(
         <Canvas ref={ref}>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
-    expect(ref.current).toBeDefined()
+    expect(ref.current).toBeInstanceOf(View)
   })
 
   it('should correctly unmount', async () => {
-    let renderer: ReactTestRenderer = null!
-
-    await act(async () => {
-      renderer = create(
+    const renderer = await act(async () =>
+      create(
         <Canvas>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
     expect(() => renderer.unmount()).not.toThrow()
   })

packages/fiber/tests/native/__snapshots__/canvas.test.tsx.snap packages/fiber/tests/__snapshots__/canvas.native.test.tsx.snap

@@ -1,61 +1,56 @@
-// use default export for jest.spyOn
 import React from 'react'
-import { render, RenderResult } from '@testing-library/react'
-
-import { Canvas, act } from '../../src'
+import { render } from '@testing-library/react'
+import { Canvas, act } from '../src'
 
 describe('web Canvas', () => {
   it('should correctly mount', async () => {
-    let renderer: RenderResult = null!
-
-    await act(async () => {
-      renderer = render(
+    const renderer = await act(async () =>
+      render(
         <Canvas>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
     expect(renderer.container).toMatchSnapshot()
   })
 
   it('should forward ref', async () => {
     const ref = React.createRef<HTMLCanvasElement>()
 
-    await act(async () => {
+    await act(async () =>
       render(
         <Canvas ref={ref}>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
-    expect(ref.current).toBeDefined()
+    expect(ref.current).toBeInstanceOf(HTMLCanvasElement)
   })
 
   it('should correctly unmount', async () => {
-    let renderer: RenderResult = null!
-    await act(async () => {
-      renderer = render(
+    const renderer = await act(async () =>
+      render(
         <Canvas>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
     expect(() => renderer.unmount()).not.toThrow()
   })
 
   it('plays nice with react SSR', async () => {
     const useLayoutEffect = jest.spyOn(React, 'useLayoutEffect')
 
-    await act(async () => {
+    await act(async () =>
       render(
         <Canvas>
           <group />
         </Canvas>,
-      )
-    })
+      ),
+    )
 
     expect(useLayoutEffect).not.toHaveBeenCalled()
   })

packages/fiber/tests/web/__snapshots__/canvas.test.tsx.snap packages/fiber/tests/__snapshots__/canvas.test.tsx.snap

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { render, fireEvent, RenderResult } from '@testing-library/react'
-
-import { Canvas, act } from '../../src'
+import { Canvas, act } from '../src'
 
 const getContainer = () => document.querySelector('canvas')?.parentNode?.parentNode as HTMLDivElement
 

packages/fiber/tests/native/canvas.test.tsx packages/fiber/tests/canvas.native.test.tsx

@@ -1,47 +1,11 @@
 import * as React from 'react'
 import * as THREE from 'three'
 import * as Stdlib from 'three-stdlib'
-import { createCanvas } from '@react-three/test-renderer/src/createTestCanvas'
-import { createWebGLContext } from '@react-three/test-renderer/src/createWebGLContext'
+import { createRoot, advance, useLoader, act, useThree, useGraph, useFrame, ObjectMap } from '../src'
 
-import { asyncUtils } from '../../../shared/asyncUtils'
-
-import { createRoot, advance, useLoader, act, useThree, useGraph, useFrame, ObjectMap } from '../../src'
-
-const resolvers: (() => void)[] = []
-
-const { waitFor } = asyncUtils(act, (resolver: () => void) => {
-  resolvers.push(resolver)
-})
+const root = createRoot(document.createElement('canvas'))
 
 describe('hooks', () => {
-  let canvas: HTMLCanvasElement = null!
-
-  beforeEach(() => {
-    canvas = createCanvas({
-      beforeReturn: (canvas) => {
-        function getContext(
-          contextId: '2d',
-          options?: CanvasRenderingContext2DSettings,
-        ): CanvasRenderingContext2D | null
-        function getContext(
-          contextId: 'bitmaprenderer',
-          options?: ImageBitmapRenderingContextSettings,
-        ): ImageBitmapRenderingContext | null
-        function getContext(contextId: 'webgl', options?: WebGLContextAttributes): WebGLRenderingContext | null
-        function getContext(contextId: 'webgl2', options?: WebGLContextAttributes): WebGL2RenderingContext | null
-        function getContext(contextId: string): RenderingContext | null {
-          if (contextId === 'webgl' || contextId === 'webgl2') {
-            return createWebGLContext(canvas)
-          }
-          return null
-        }
-
-        canvas.getContext = getContext
-      },
-    })
-  })
-
   it('can handle useThree hook', async () => {
     let result = {} as {
       camera: THREE.Camera
@@ -68,9 +32,7 @@ describe('hooks', () => {
       return <group />
     }
 
-    await act(async () => {
-      createRoot(canvas).render(<Component />)
-    })
+    await act(async () => root.render(<Component />))
 
     expect(result.camera instanceof THREE.Camera).toBeTruthy()
     expect(result.scene instanceof THREE.Scene).toBeTruthy()
@@ -96,14 +58,9 @@ describe('hooks', () => {
       )
     }
 
-    let scene: THREE.Scene = null!
-    await act(
-      async () =>
-        (scene = createRoot(canvas)
-          .configure({ frameloop: 'never' })
-          .render(<Component />)
-          .getState().scene),
-    )
+    const store = await act(async () => root.configure({ frameloop: 'never' }).render(<Component />))
+    const { scene } = store.getState()
+
     advance(Date.now())
     expect(scene.children[0].position.x).toEqual(1)
     expect(frameCalls.length).toBeGreaterThan(0)
@@ -125,18 +82,8 @@ describe('hooks', () => {
       return <primitive object={model} />
     }
 
-    let scene: THREE.Scene = null!
-    await act(async () => {
-      scene = createRoot(canvas)
-        .render(
-          <React.Suspense fallback={null}>
-            <Component />
-          </React.Suspense>,
-        )
-        .getState().scene
-    })
-
-    await waitFor(() => expect(scene.children[0]).toBeDefined())
+    const store = await act(async () => root.render(<Component />))
+    const { scene } = store.getState()
 
     expect(scene.children[0]).toBe(MockMesh)
   })
@@ -183,18 +130,8 @@ describe('hooks', () => {
       )
     }
 
-    let scene: THREE.Scene = null!
-    await act(async () => {
-      scene = createRoot(canvas)
-        .render(
-          <React.Suspense fallback={null}>
-            <Component />
-          </React.Suspense>,
-        )
-        .getState().scene
-    })
-
-    await waitFor(() => expect(scene.children[0]).toBeDefined())
+    const store = await act(async () => root.render(<Component />))
+    const { scene } = store.getState()
 
     expect(scene.children[0]).toBe(MockMesh)
   })
@@ -230,9 +167,7 @@ describe('hooks', () => {
       return <mesh />
     }
 
-    await act(async () => {
-      createRoot(canvas).render(<Component />)
-    })
+    await act(async () => root.render(<Component />))
 
     expect(result).toEqual({
       nodes: {