Skip to content

chore(tests): use React act implementation #3515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore(tests): use React act implementation #3515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/fiber/tests/canvas.native.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import * as React from 'react'
import { View } from 'react-native'
// @ts-ignore TS2305 remove with modern TS config
import { render } from 'react-nil'
import { Canvas, act } from '../src/native'
import { Canvas } from '../src/native'

describe('native Canvas', () => {
it('should correctly mount', async () => {
const container = await act(async () =>
const container = await React.act(async () =>
render(
<Canvas>
<group />
Expand All @@ -20,7 +20,7 @@ describe('native Canvas', () => {
it('should forward ref', async () => {
const ref = React.createRef<View>()

await act(async () =>
await React.act(async () =>
render(
<Canvas ref={ref}>
<group />
Expand All @@ -40,7 +40,7 @@ describe('native Canvas', () => {
return null
}

await act(async () => {
await React.act(async () => {
render(
<ParentContext.Provider value={true}>
<Canvas>
Expand All @@ -54,14 +54,14 @@ describe('native Canvas', () => {
})

it('should correctly unmount', async () => {
await act(async () =>
await React.act(async () =>
render(
<Canvas>
<group />
</Canvas>,
),
)

expect(async () => await act(async () => render(null))).not.toThrow()
expect(async () => await React.act(async () => render(null))).not.toThrow()
})
})
12 changes: 6 additions & 6 deletions packages/fiber/tests/canvas.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
import { render } from '@testing-library/react'
import { Canvas, act } from '../src'
import { Canvas } from '../src'

describe('web Canvas', () => {
it('should correctly mount', async () => {
const renderer = await act(async () =>
const renderer = await React.act(async () =>
render(
<Canvas>
<group />
Expand All @@ -18,7 +18,7 @@ describe('web Canvas', () => {
it('should forward ref', async () => {
const ref = React.createRef<HTMLCanvasElement>()

await act(async () =>
await React.act(async () =>
render(
<Canvas ref={ref}>
<group />
Expand All @@ -38,7 +38,7 @@ describe('web Canvas', () => {
return null
}

await act(async () => {
await React.act(async () => {
render(
<ParentContext.Provider value={true}>
<Canvas>
Expand All @@ -52,7 +52,7 @@ describe('web Canvas', () => {
})

it('should correctly unmount', async () => {
const renderer = await act(async () =>
const renderer = await React.act(async () =>
render(
<Canvas>
<group />
Expand All @@ -66,7 +66,7 @@ describe('web Canvas', () => {
it('plays nice with react SSR', async () => {
const useLayoutEffect = jest.spyOn(React, 'useLayoutEffect')

await act(async () =>
await React.act(async () =>
render(
<Canvas>
<group />
Expand Down
46 changes: 23 additions & 23 deletions packages/fiber/tests/events.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react'
import { render, fireEvent, RenderResult } from '@testing-library/react'
import { Canvas, act, extend } from '../src'
import { Canvas, extend } from '../src'
import THREE from 'three'

extend(THREE as any)
Expand All @@ -11,7 +11,7 @@ describe('events', () => {
it('can handle onPointerDown', async () => {
const handlePointerDown = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<mesh onPointerDown={handlePointerDown}>
Expand All @@ -35,7 +35,7 @@ describe('events', () => {
const handleClick = jest.fn()
const handleMissed = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<mesh onPointerMissed={handleMissed} onClick={handleClick}>
Expand All @@ -60,7 +60,7 @@ describe('events', () => {
const handleClick = jest.fn()
const handleMissed = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<mesh onPointerMissed={handleMissed} onClick={handleClick}>
Expand Down Expand Up @@ -95,7 +95,7 @@ describe('events', () => {
const handleClick = jest.fn()
const handleMissed = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<group onPointerMissed={handleMissed}>
Expand Down Expand Up @@ -131,7 +131,7 @@ describe('events', () => {
it('can handle onPointerMissed on Canvas', async () => {
const handleMissed = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas onPointerMissed={handleMissed}>
<mesh>
Expand All @@ -156,7 +156,7 @@ describe('events', () => {
const handlePointerEnter = jest.fn()
const handlePointerOut = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<mesh
Expand Down Expand Up @@ -196,7 +196,7 @@ describe('events', () => {
})
const handlePointerLeave = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<mesh onPointerLeave={handlePointerLeave} onPointerEnter={handlePointerEnter}>
Expand Down Expand Up @@ -232,7 +232,7 @@ describe('events', () => {
const handleClickFront = jest.fn((e) => e.stopPropagation())
const handleClickRear = jest.fn()

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<mesh onClick={handleClickFront}>
Expand Down Expand Up @@ -299,7 +299,7 @@ describe('events', () => {

it('should release when the capture target is unmounted', async () => {
let renderResult: RenderResult = undefined!
await act(async () => {
await React.act(async () => {
renderResult = render(<PointerCaptureTest hasMesh={true} />)
return renderResult
})
Expand All @@ -314,31 +314,31 @@ describe('events', () => {
Object.defineProperty(down, 'offsetY', { get: () => 480 })

/* testing-utils/react's fireEvent wraps the event like React does, so it doesn't match how our event handlers are called in production, so we call dispatchEvent directly. */
await act(async () => canvas.dispatchEvent(down))
await React.act(async () => canvas.dispatchEvent(down))

/* This should have captured the DOM pointer */
expect(handlePointerDown).toHaveBeenCalledTimes(1)
expect(canvas.setPointerCapture).toHaveBeenCalledWith(pointerId)
expect(canvas.releasePointerCapture).not.toHaveBeenCalled()

/* Now remove the mesh */
await act(async () => renderResult.rerender(<PointerCaptureTest hasMesh={false} />))
await React.act(async () => renderResult.rerender(<PointerCaptureTest hasMesh={false} />))

expect(canvas.releasePointerCapture).toHaveBeenCalledWith(pointerId)

const move = new PointerEvent('pointerdown', { pointerId })
Object.defineProperty(move, 'offsetX', { get: () => 577 })
Object.defineProperty(move, 'offsetY', { get: () => 480 })

await act(async () => canvas.dispatchEvent(move))
await React.act(async () => canvas.dispatchEvent(move))

/* There should now be no pointer capture */
expect(handlePointerMove).not.toHaveBeenCalled()
})

it('should not leave when captured', async () => {
let renderResult: RenderResult = undefined!
await act(async () => {
await React.act(async () => {
renderResult = render(<PointerCaptureTest hasMesh manualRelease />)
return renderResult
})
Expand All @@ -356,38 +356,38 @@ describe('events', () => {
Object.defineProperty(moveOut, 'offsetY', { get: () => -10000 })

/* testing-utils/react's fireEvent wraps the event like React does, so it doesn't match how our event handlers are called in production, so we call dispatchEvent directly. */
await act(async () => canvas.dispatchEvent(moveIn))
await React.act(async () => canvas.dispatchEvent(moveIn))
expect(handlePointerEnter).toHaveBeenCalledTimes(1)
expect(handlePointerMove).toHaveBeenCalledTimes(1)

const down = new PointerEvent('pointerdown', { pointerId })
Object.defineProperty(down, 'offsetX', { get: () => 577 })
Object.defineProperty(down, 'offsetY', { get: () => 480 })

await act(async () => canvas.dispatchEvent(down))
await React.act(async () => canvas.dispatchEvent(down))

// If we move the pointer now, when it is captured, it should raise the onPointerMove event even though the pointer is not over the element,
// and NOT raise the onPointerLeave event.
await act(async () => canvas.dispatchEvent(moveOut))
await React.act(async () => canvas.dispatchEvent(moveOut))
expect(handlePointerMove).toHaveBeenCalledTimes(2)
expect(handlePointerLeave).not.toHaveBeenCalled()

await act(async () => canvas.dispatchEvent(moveIn))
await React.act(async () => canvas.dispatchEvent(moveIn))
expect(handlePointerMove).toHaveBeenCalledTimes(3)

const up = new PointerEvent('pointerup', { pointerId })
Object.defineProperty(up, 'offsetX', { get: () => 577 })
Object.defineProperty(up, 'offsetY', { get: () => 480 })
const lostpointercapture = new PointerEvent('lostpointercapture', { pointerId })

await act(async () => canvas.dispatchEvent(up))
await act(async () => canvas.dispatchEvent(lostpointercapture))
await React.act(async () => canvas.dispatchEvent(up))
await React.act(async () => canvas.dispatchEvent(lostpointercapture))

// The pointer is still over the element, so onPointerLeave should not have been called.
expect(handlePointerLeave).not.toHaveBeenCalled()

// The element pointer should no longer be captured, so moving it away should call onPointerLeave.
await act(async () => canvas.dispatchEvent(moveOut))
await React.act(async () => canvas.dispatchEvent(moveOut))
expect(handlePointerEnter).toHaveBeenCalledTimes(1)
expect(handlePointerLeave).toHaveBeenCalledTimes(1)
})
Expand All @@ -400,7 +400,7 @@ describe('events', () => {
const object = new THREE.Group()
object.add(new THREE.Mesh(new THREE.BoxGeometry(2, 2), new THREE.MeshBasicMaterial()))

await act(async () => {
await React.act(async () => {
render(
<Canvas>
<group onPointerDown={handlePointerDownOuter}>
Expand All @@ -422,7 +422,7 @@ describe('events', () => {

it('can handle a DOM offset canvas', async () => {
const handlePointerDown = jest.fn()
await act(async () => {
await React.act(async () => {
render(
<Canvas
onCreated={(state) => {
Expand Down
17 changes: 8 additions & 9 deletions packages/fiber/tests/hooks.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
createRoot,
advance,
useLoader,
act,
useThree,
useGraph,
useFrame,
Expand Down Expand Up @@ -52,7 +51,7 @@ describe('hooks', () => {
return <group />
}

await act(async () => root.render(<Component />))
await React.act(async () => root.render(<Component />))

expect(result.camera instanceof THREE.Camera).toBeTruthy()
expect(result.scene instanceof THREE.Scene).toBeTruthy()
Expand All @@ -78,7 +77,7 @@ describe('hooks', () => {
)
}

const store = await act(async () => (await root.configure({ frameloop: 'never' })).render(<Component />))
const store = await React.act(async () => (await root.configure({ frameloop: 'never' })).render(<Component />))
const { scene } = store.getState()

advance(Date.now())
Expand All @@ -105,7 +104,7 @@ describe('hooks', () => {
return <primitive object={gltf.scene} />
}

const store = await act(async () => root.render(<Component />))
const store = await React.act(async () => root.render(<Component />))
const { scene } = store.getState()

expect(scene.children[0]).toBe(MockMesh)
Expand Down Expand Up @@ -151,7 +150,7 @@ describe('hooks', () => {
)
}

const store = await act(async () => root.render(<Component />))
const store = await React.act(async () => root.render(<Component />))
const { scene } = store.getState()

expect(scene.children[0]).toBe(MockMesh)
Expand All @@ -172,7 +171,7 @@ describe('hooks', () => {
function Test(): null {
return useLoader(loader, '', (loader) => (proto = loader))
}
await act(async () => root.render(<Test />))
await React.act(async () => root.render(<Test />))

expect(proto).toBe(loader)
})
Expand All @@ -189,7 +188,7 @@ describe('hooks', () => {
function Test(): null {
return useLoader(Loader, '', (loader) => (proto = loader))
}
await act(async () => root.render(<Test />))
await React.act(async () => root.render(<Test />))

expect(proto).toBeInstanceOf(Loader)
})
Expand Down Expand Up @@ -225,7 +224,7 @@ describe('hooks', () => {
return <mesh />
}

await act(async () => root.render(<Component />))
await React.act(async () => root.render(<Component />))

expect(result).toEqual({
nodes: {
Expand Down Expand Up @@ -257,7 +256,7 @@ describe('hooks', () => {
instance = useInstanceHandle(ref)
return <group ref={ref} />
}
await act(async () => root.render(<Component />))
await React.act(async () => root.render(<Component />))

expect(instance.current).toBe((ref.current as unknown as Instance<THREE.Group>['object']).__r3f)
})
Expand Down
Loading
Loading