tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/test/HandTool.test.ts

@@ -1,4 +1,3 @@
-import { vi } from 'vitest'
 import { HandTool } from '../lib/tools/HandTool/HandTool'
 import { TestEditor, createDefaultShapes } from './TestEditor'
 
@@ -15,7 +14,7 @@ afterEach(() => {
 	editor?.dispose()
 })
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 describe(HandTool, () => {
 	it('Double taps to zoom in', () => {
@@ -23,9 +22,9 @@ describe(HandTool, () => {
 		expect(editor.getZoomLevel()).toBe(1)
 		editor.click()
 		editor.click() // double click!
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(2) // all done
 	})
 
@@ -35,9 +34,9 @@ describe(HandTool, () => {
 		editor.click()
 		editor.click()
 		editor.click() // triple click!
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(0.5) // all done
 	})
 
@@ -49,9 +48,9 @@ describe(HandTool, () => {
 		editor.click()
 		editor.click()
 		editor.click() // quad click!
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(2) // animating
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(1) // all done
 	})
 
@@ -63,9 +62,9 @@ describe(HandTool, () => {
 		editor.click()
 		editor.click()
 		editor.click() // quad click!
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		const z = editor.getZoomLevel()
 		editor.zoomToFit() // call zoom to fit manually to compare
 		expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed

package/src/test/HighlightShape.test.ts

@@ -1,7 +1,6 @@
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 let editor: TestEditor
 

package/src/test/SelectTool.test.ts

@@ -7,7 +7,6 @@ import {
 	createShapeId,
 	toRichText,
 } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -19,7 +18,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -161,7 +160,7 @@ describe('TLSelectTool.Translating', () => {
 		// There's a timer here! We shouldn't end the clone until the timer is done
 		expect(editor.getCurrentPageShapes().length).toBe(2)
 
-		vi.advanceTimersByTime(250) // tick tock
+		jest.advanceTimersByTime(250) // tick tock
 
 		// Timer is done! We should have ended the clone.
 		expect(editor.getCurrentPageShapes().length).toBe(1)
@@ -276,27 +275,17 @@ describe('PointingLabel', () => {
 				type: 'arrow',
 				x: 100,
 				y: 100,
-				props: {
-					richText: toRichText('Test Label'),
-					start: { x: 0, y: 0 },
-					end: { x: 100, y: 0 },
-				},
+				props: { text: 'Test Label', end: { x: 100, y: 100 } },
 			},
 		])
-		const shape = editor.getShape(ids.arrow1)!
-		// First select the shape so it's already selected
-		editor.select(shape.id)
-
-		// Click at the middle of the arrow where the label would be and drag to move the label
-		editor.pointerDown(150, 100, {
+		const shape = editor.getShape(ids.arrow1)
+		editor.pointerDown(150, 150, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(160, 100)
+		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.pointing_arrow_label')
 
-		// Continue dragging to actually move the label, then it should go to idle
-		editor.pointerMove(170, 100)
 		editor.pointerUp()
 		editor.expectToBeIn('select.idle')
 	})
@@ -308,21 +297,16 @@ describe('PointingLabel', () => {
 				type: 'arrow',
 				x: 100,
 				y: 100,
-				props: {
-					richText: toRichText('Test Label'),
-					start: { x: 0, y: 0 },
-					end: { x: 100, y: 0 },
-				},
+				props: { text: 'Test Label', end: { x: 100, y: 100 } },
 			},
 		])
 		const shape = editor.getShape(ids.arrow1)
 
-		// Click at the middle of the arrow where the label would be
-		editor.pointerDown(150, 100, {
+		editor.pointerDown(150, 150, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(160, 100)
+		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.pointing_arrow_label')
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
@@ -330,25 +314,14 @@ describe('PointingLabel', () => {
 
 	it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
 		editor.createShapes<TLArrowShape>([
-			{
-				id: ids.arrow1,
-				type: 'arrow',
-				x: 100,
-				y: 100,
-				props: {
-					richText: toRichText(''), // Empty label
-					start: { x: 0, y: 0 },
-					end: { x: 100, y: 0 },
-				},
-			},
+			{ id: ids.arrow1, type: 'arrow', x: 100, y: 100, props: { text: 'Test Label' } },
 		])
-		const shape = editor.getShape(ids.arrow1)!
-		// Click anywhere on the arrow - since there's no label, it should go to translating
-		editor.pointerDown(150, 100, {
+		const shape = editor.getShape(ids.arrow1)
+		editor.pointerDown(0, 150, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(155, 105)
+		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.translating')
 
 		editor.pointerUp()

package/src/test/TLUserPreferences.test.ts

@@ -1,5 +1,4 @@
 import { TLUserPreferences, atom, createTLUser } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -60,7 +59,7 @@ describe('TLUserPreferences', () => {
 			locale: null,
 			name: null,
 		})
-		const setUserPreferences = vi.fn((preferences) => userPreferences.set(preferences))
+		const setUserPreferences = jest.fn((preferences) => userPreferences.set(preferences))
 
 		editor = new TestEditor({
 			user: createTLUser({
@@ -81,7 +80,7 @@ describe('TLUserPreferences', () => {
 			id: '123',
 			name: 'blah',
 		})
-		const setUserPreferences = vi.fn((preferences) => userPreferences.set(preferences))
+		const setUserPreferences = jest.fn((preferences) => userPreferences.set(preferences))
 
 		editor = new TestEditor({
 			user: createTLUser({
@@ -102,7 +101,7 @@ describe('TLUserPreferences', () => {
 			id: '123',
 			name: 'blah',
 		})
-		const setUserPreferences = vi.fn((preferences) => userPreferences.set(preferences))
+		const setUserPreferences = jest.fn((preferences) => userPreferences.set(preferences))
 
 		editor = new TestEditor({
 			user: createTLUser({

package/src/test/TestEditor.ts

@@ -34,7 +34,6 @@ import {
 	rotateSelectionHandle,
 	tlenv,
 } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { defaultBindingUtils } from '../lib/defaultBindingUtils'
 import { defaultShapeTools } from '../lib/defaultShapeTools'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
@@ -43,14 +42,7 @@ import { defaultTools } from '../lib/defaultTools'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from '../lib/utils/text/richText'
 import { shapesFromJsx } from './test-jsx'
 
-declare module 'vitest' {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	interface Matchers<T = any> {
-		toCloselyMatchObject(expected: any, roundToNearest?: number): void
-	}
-}
-
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 Object.assign(navigator, {
 	clipboard: {
@@ -63,6 +55,16 @@ Object.assign(navigator, {
 // @ts-expect-error
 window.ClipboardItem = class {}
 
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace jest {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		interface Matchers<R> {
+			toCloselyMatchObject(value: any, precision?: number): void
+		}
+	}
+}
+
 export class TestEditor extends Editor {
 	constructor(
 		options: Partial<Omit<TLEditorOptions, 'store'>> = {},
@@ -80,8 +82,8 @@ export class TestEditor extends Editor {
 			right: 1080,
 		}
 		// make the app full screen for the sake of the insets property
-		vi.spyOn(document.body, 'scrollWidth', 'get').mockImplementation(() => bounds.width)
-		vi.spyOn(document.body, 'scrollHeight', 'get').mockImplementation(() => bounds.height)
+		jest.spyOn(document.body, 'scrollWidth', 'get').mockImplementation(() => bounds.width)
+		jest.spyOn(document.body, 'scrollHeight', 'get').mockImplementation(() => bounds.height)
 
 		elm.tabIndex = 0
 		elm.getBoundingClientRect = () => bounds as DOMRect
@@ -270,12 +272,12 @@ export class TestEditor extends Editor {
 	 * methods, or call mockRestore() to restore the actual implementation (e.g.
 	 * _transformPointerDownSpy.mockRestore())
 	 */
-	_transformPointerDownSpy = vi
+	_transformPointerDownSpy = jest
 		.spyOn(this._clickManager, 'handlePointerEvent')
 		.mockImplementation((info) => {
 			return info
 		})
-	_transformPointerUpSpy = vi
+	_transformPointerUpSpy = jest
 		.spyOn(this._clickManager, 'handlePointerEvent')
 		.mockImplementation((info) => {
 			return info

package/src/test/TldrawEditor.test.tsx

@@ -12,7 +12,6 @@ import {
 	noop,
 } from '@tldraw/editor'
 import { StrictMode } from 'react'
-import { vi } from 'vitest'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
 import { GeoShapeUtil } from '../lib/shapes/geo/GeoShapeUtil'
@@ -90,7 +89,7 @@ describe('<TldrawEditor />', () => {
 	})
 
 	it('throws if the store has different shapes to the ones passed in', async () => {
-		const spy = vi.spyOn(console, 'error').mockImplementation(noop)
+		const spy = jest.spyOn(console, 'error').mockImplementation(noop)
 		// expect(() =>
 		// 	render(
 		// 		<TldrawEditor
@@ -130,7 +129,7 @@ describe('<TldrawEditor />', () => {
 
 	it('Accepts fresh versions of store and calls `onMount` for each one', async () => {
 		const initialStore = createTLStore({ shapeUtils: [], bindingUtils: [] })
-		const onMount = vi.fn()
+		const onMount = jest.fn()
 		const rendered = await renderTldrawComponent(
 			<TldrawEditor
 				initialState="select"
@@ -140,8 +139,8 @@ describe('<TldrawEditor />', () => {
 			/>,
 			{ waitForPatterns: false }
 		)
-		const initialEditor = onMount.mock.lastCall![0]
-		vi.spyOn(initialEditor, 'dispose')
+		const initialEditor = onMount.mock.lastCall[0]
+		jest.spyOn(initialEditor, 'dispose')
 		expect(initialEditor.store).toBe(initialStore)
 		// re-render with the same store:
 		rendered.rerender(
@@ -162,7 +161,7 @@ describe('<TldrawEditor />', () => {
 		await rendered.findAllByTestId('canvas')
 		expect(initialEditor.dispose).toHaveBeenCalledTimes(1)
 		expect(onMount).toHaveBeenCalledTimes(2)
-		expect(onMount.mock.lastCall![0].store).toBe(newStore)
+		expect(onMount.mock.lastCall[0].store).toBe(newStore)
 	})
 
 	it('Renders the canvas and shapes', async () => {
@@ -228,7 +227,7 @@ describe('<TldrawEditor />', () => {
 
 	it('renders correctly in strict mode', async () => {
 		const editorInstances = new Set<Editor>()
-		const onMount = vi.fn((editor: Editor) => {
+		const onMount = jest.fn((editor: Editor) => {
 			editorInstances.add(editor)
 		})
 		await renderTldrawComponent(
@@ -246,7 +245,7 @@ describe('<TldrawEditor />', () => {
 
 	it('allows updating camera options without re-creating the editor', async () => {
 		const editors: Editor[] = []
-		const onMount = vi.fn((editor: Editor) => {
+		const onMount = jest.fn((editor: Editor) => {
 			if (!editors.includes(editor)) editors.push(editor)
 		})
 
@@ -362,7 +361,7 @@ describe('<TldrawEditor />', () => {
 	})
 
 	it('passes through the `assets` prop when creating its own in-memory store', async () => {
-		const myUploadFn = vi.fn()
+		const myUploadFn = jest.fn()
 		const assetStore: TLAssetStore = { upload: myUploadFn }
 
 		const { editor } = await renderTldrawComponentWithEditor(
@@ -376,7 +375,7 @@ describe('<TldrawEditor />', () => {
 	})
 
 	it('passes through the `assets` prop when using `persistenceKey`', async () => {
-		const myUploadFn = vi.fn()
+		const myUploadFn = jest.fn()
 		const assetStore: TLAssetStore = { upload: myUploadFn }
 
 		const { editor } = await renderTldrawComponentWithEditor(
@@ -395,7 +394,7 @@ describe('<TldrawEditor />', () => {
 	})
 
 	it('will not re-create the editor if re-rendered with identical options', async () => {
-		const onMount = vi.fn()
+		const onMount = jest.fn()
 
 		const renderer = await renderTldrawComponent(
 			<TldrawEditor onMount={onMount} options={{ maxPages: 1 }} />,

package/src/test/ZoomTool.test.ts

@@ -1,5 +1,4 @@
 import { createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -8,7 +7,7 @@ const ids = {
 	box1: createShapeId('box1'),
 }
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -45,7 +44,7 @@ describe('TLSelectTool.Zooming', () => {
 		expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
 		editor.click()
 		editor.expectToBeIn('zoom.idle')
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(2)
 	})
 
@@ -56,7 +55,7 @@ describe('TLSelectTool.Zooming', () => {
 		expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 })
 		expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
 		editor.click()
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(0.5)
 	})
 
@@ -123,7 +122,7 @@ describe('TLSelectTool.Zooming', () => {
 		editor.expectToBeIn('zoom.zoom_brushing')
 		editor.pointerUp(change, change)
 		editor.expectToBeIn('zoom.idle')
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(2)
 		expect(editor.getViewportPageBounds()).toMatchObject({
 			x: change / 2,
@@ -157,7 +156,7 @@ describe('TLSelectTool.Zooming', () => {
 			h: newBoundsHeight,
 		})
 		editor.pointerUp(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight)
-		vi.advanceTimersByTime(300)
+		jest.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBeCloseTo(1.64)
 		expect(editor.getViewportPageBounds()).toMatchInlineSnapshot(`
 		Box {
@@ -196,7 +195,7 @@ describe('TLSelectTool.Zooming', () => {
 			h: newBoundsHeight,
 		})
 		editor.pointerUp()
-		vi.advanceTimersByTime(500)
+		jest.advanceTimersByTime(500)
 		expect(editor.getZoomLevel()).toBeCloseTo(originalZoomLevel / 2)
 		expect(editor.getViewportPageBounds()).toMatchObject({
 			x: -440,

package/src/test/__snapshots__/drawing.test.ts.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Draws a bunch > draw shape 1`] = `
+exports[`Draws a bunch: draw shape 1`] = `
 {
   "index": "a1",
   "isLocked": false,

package/src/test/__snapshots__/groups.test.tsx.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > box shape after second resize 1`] = `
+exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: box shape after second resize 1`] = `
 {
   "h": 40,
   "w": 40,
@@ -9,7 +9,7 @@ exports[`creating new shapes > pencil > lines > will reisze the group appropriat
 }
 `;
 
-exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > group shape after second resize 1`] = `
+exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: group shape after second resize 1`] = `
 {
   "h": 120,
   "w": 120,
@@ -18,7 +18,7 @@ exports[`creating new shapes > pencil > lines > will reisze the group appropriat
 }
 `;
 
-exports[`creating new shapes > pencil > lines > will reisze the group appropriately if the new shape changes the group bounds > group with line shape 1`] = `
+exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: group with line shape 1`] = `
 Box {
   "h": 110,
   "w": 110,
@@ -27,7 +27,7 @@ Box {
 }
 `;
 
-exports[`creating new shapes > pencil > lines > works if the shape drawing begins outside of the current group bounds > box shape after resize 1`] = `
+exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds: box shape after resize 1`] = `
 {
   "h": 50,
   "w": 50,
@@ -36,7 +36,7 @@ exports[`creating new shapes > pencil > lines > works if the shape drawing begin
 }
 `;
 
-exports[`creating new shapes > pencil > lines > works if the shape drawing begins outside of the current group bounds > group with line 1`] = `
+exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds: group with line 1`] = `
 {
   "h": 200,
   "w": 200,

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`When resizing a shape with children > Resizes a rotated draw shape > draw shape after rotating 1`] = `
+exports[`When resizing a shape with children Resizes a rotated draw shape: draw shape after rotating 1`] = `
 {
   "id": "shape:lineA",
   "index": "a3",

package/src/test/arrows-megabus.test.tsx

@@ -1,5 +1,4 @@
 import { TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
@@ -209,7 +208,7 @@ describe('When binding an arrow to a shape', () => {
 
 		editor.keyUp('Control')
 		expect(bindings().end).toBeUndefined() // there's a short delay here, it should still be a point
-		vi.advanceTimersByTime(1000) // once the timer runs out...
+		jest.advanceTimersByTime(1000) // once the timer runs out...
 		expect(bindings().end).toBeDefined()
 
 		editor.keyDown('Control') // no delay when pressing control again though
@@ -217,7 +216,7 @@ describe('When binding an arrow to a shape', () => {
 
 		editor.keyUp('Control')
 		editor.pointerUp()
-		vi.advanceTimersByTime(1000) // once the timer runs out...
+		jest.advanceTimersByTime(1000) // once the timer runs out...
 		expect(bindings().end).toBeUndefined() // still a point because interaction ended before timer ended
 	})
 
@@ -238,7 +237,7 @@ describe('When binding an arrow to a shape', () => {
 		// Releasing ctrl should restore binding (after timer)
 		editor.keyUp('Control')
 		expect(bindings().end).toBeUndefined() // Still no binding immediately
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(bindings().end).toBeDefined()
 	})
 })
@@ -289,13 +288,11 @@ describe('When shapes are overlapping', () => {
 		editor.pointerDown(0, 50) // over nothing
 		editor.pointerMove(125, 50) // over box1 only
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(175, 50) // box2 is higher but box1 is filled, but we're on the edge ofd box 2
-		expect(bindings().end).toMatchObject({ toId: ids.box2 })
-		editor.pointerMove(175, 70) // box2 is higher but box1 is filled, and we're inside of box2
+		editor.pointerMove(175, 50) // box2 is higher but box1 is filled?
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(225, 70) // box3 is higher
+		editor.pointerMove(225, 50) // box3 is higher
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(275, 70) // box4 is higher but box 3 is filled
+		editor.pointerMove(275, 50) // box4 is higher but box 3 is filled
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 	})
 
@@ -307,18 +304,14 @@ describe('When shapes are overlapping', () => {
 		])
 		editor.setCurrentTool('arrow')
 		editor.pointerDown(0, 50)
-		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2, but we're on the edge of box 2
-		expect(bindings().end).toMatchObject({ toId: ids.box2 })
-		editor.pointerMove(175, 70) // box1 is smaller even though it's behind box2
+		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(150, 90) // box3 is smaller and at the front but we're on the edge of box 2
-		expect(bindings().end).toMatchObject({ toId: ids.box2 })
-		editor.pointerMove(160, 90) // box3 is smaller and at the front and we're in box1 and box 3 and box 2
+		editor.pointerMove(150, 90) // box3 is smaller and at the front
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 		editor.sendToBack([ids.box3])
 		editor.pointerMove(149, 90) // box3 is smaller, even when at the back
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(175, 60) // inside of box1 and box 2, but box 1 is smaller
+		editor.pointerMove(175, 50)
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
 	})
 })
@@ -410,7 +403,7 @@ describe('When starting an arrow inside of multiple shapes', () => {
 		editor.pointerDown(20, 20) // upper left
 		expect(editor.getCurrentPageShapes().length).toBe(1)
 		expect(arrow()).toBe(null)
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		editor.pointerMove(25, 20)
 		expect(editor.getCurrentPageShapes().length).toBe(2)
 		expect(arrow()).toMatchObject({ x: 20, y: 20 })

package/src/test/bindings.test.tsx

@@ -11,7 +11,6 @@ import {
 	createBindingId,
 	createShapeId,
 } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -24,19 +23,37 @@ const ids = {
 	box4: createShapeId('box4'),
 }
 
-const mockOnOperationComplete = vi.fn()
-const mockOnBeforeDelete = vi.fn()
-const mockOnAfterDelete = vi.fn()
-const mockOnBeforeFromShapeDelete = vi.fn()
-const mockOnBeforeToShapeDelete = vi.fn()
-const mockOnBeforeFromShapeIsolate = vi.fn()
-const mockOnBeforeToShapeIsolate = vi.fn()
-const mockOnBeforeCreate = vi.fn()
-const mockOnAfterCreate = vi.fn()
-const mockOnBeforeChange = vi.fn()
-const mockOnAfterChange = vi.fn()
-const mockOnAfterChangeFromShape = vi.fn()
-const mockOnAfterChangeToShape = vi.fn()
+const mockOnOperationComplete = jest.fn() as jest.Mock<void, []>
+const mockOnBeforeDelete = jest.fn() as jest.Mock<void, [BindingOnDeleteOptions<TLUnknownBinding>]>
+const mockOnAfterDelete = jest.fn() as jest.Mock<void, [BindingOnDeleteOptions<TLUnknownBinding>]>
+const mockOnBeforeFromShapeDelete = jest.fn() as jest.Mock<
+	void,
+	[BindingOnShapeDeleteOptions<TLUnknownBinding>]
+>
+const mockOnBeforeToShapeDelete = jest.fn() as jest.Mock<
+	void,
+	[BindingOnShapeDeleteOptions<TLUnknownBinding>]
+>
+const mockOnBeforeFromShapeIsolate = jest.fn() as jest.Mock<
+	void,
+	[BindingOnShapeIsolateOptions<TLUnknownBinding>]
+>
+const mockOnBeforeToShapeIsolate = jest.fn() as jest.Mock<
+	void,
+	[BindingOnShapeIsolateOptions<TLUnknownBinding>]
+>
+const mockOnBeforeCreate = jest.fn() as jest.Mock<void, [BindingOnCreateOptions<TLUnknownBinding>]>
+const mockOnAfterCreate = jest.fn() as jest.Mock<void, [BindingOnCreateOptions<TLUnknownBinding>]>
+const mockOnBeforeChange = jest.fn() as jest.Mock<void, [BindingOnChangeOptions<TLUnknownBinding>]>
+const mockOnAfterChange = jest.fn() as jest.Mock<void, [BindingOnChangeOptions<TLUnknownBinding>]>
+const mockOnAfterChangeFromShape = jest.fn() as jest.Mock<
+	void,
+	[BindingOnShapeChangeOptions<TLUnknownBinding>]
+>
+const mockOnAfterChangeToShape = jest.fn() as jest.Mock<
+	void,
+	[BindingOnShapeChangeOptions<TLUnknownBinding>]
+>
 
 const calls: string[] = []
 
@@ -256,11 +273,9 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
 })
 
 test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
-	mockOnBeforeFromShapeDelete.mockImplementation(
-		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
-			editor.deleteShape(options.binding.toId)
-		}
-	)
+	mockOnBeforeFromShapeDelete.mockImplementation((options) => {
+		editor.deleteShape(options.binding.toId)
+	})
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)
@@ -301,11 +316,9 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
 })
 
 test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
-	mockOnBeforeToShapeDelete.mockImplementation(
-		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
-			editor.deleteShape(options.binding.fromId)
-		}
-	)
+	mockOnBeforeToShapeDelete.mockImplementation((options) => {
+		editor.deleteShape(options.binding.fromId)
+	})
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)