tldraw 3.16.0-canary.cb4562244982 → 3.16.0-canary.cb97f41de62b

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-arrows.json 1`] = `
 {
   "binding:8": {
     "fromId": "shape:7",
@@ -173,7 +173,7 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-elbow-arrows.json 1`] = `
 {
   "binding:7": {
     "fromId": "shape:6",
@@ -346,7 +346,7 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures image.json 1`] = `
+exports[`putExcalidrawContent test fixtures > image.json 1`] = `
 {
   "asset:5": {
     "id": "asset:5",
@@ -404,7 +404,7 @@ exports[`putExcalidrawContent test fixtures image.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures line-drawing.json 1`] = `
+exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
 {
   "document:document": {
     "gridSize": 10,

package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > arrow-binding.tldr 1`] = `
 {
   "binding:12": {
     "fromId": "shape:11",
@@ -173,7 +173,7 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
 }
 `;
 
-exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > exact-arrow-binding.tldr 1`] = `
 {
   "binding:11": {
     "fromId": "shape:10",
@@ -346,7 +346,7 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
 }
 `;
 
-exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > incorrect-arrow-binding.tldr 1`] = `
 {
   "binding:11": {
     "fromId": "shape:10",

package/src/test/A11y.test.tsx

@@ -1,16 +1,17 @@
 import { createShapeId, toRichText } from '@tldraw/editor'
+import { Mock, vi } from 'vitest'
 import { generateShapeAnnouncementMessage } from '../lib/ui/components/A11y'
 import { TestEditor } from './TestEditor'
 
 describe('A11y Shape Announcements', () => {
 	let editor: TestEditor
-	let mockTranslate: jest.Mock
+	let mockTranslate: Mock
 
 	beforeEach(() => {
 		editor = new TestEditor()
 
 		// Create a simple translation mock
-		mockTranslate = jest.fn((key) => {
+		mockTranslate = vi.fn((key) => {
 			if (key === 'a11y.multiple-shapes') return '{num} shapes selected'
 			if (key === 'a11y.shape') return 'Shape'
 			if (key === 'a11y.text') return 'Text'

package/src/test/ClickManager.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -10,7 +11,7 @@ beforeEach(() => {
 	editor._transformPointerUpSpy.mockRestore()
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 describe('Handles events', () => {
 	it('Emits single click events', () => {
@@ -23,7 +24,7 @@ describe('Handles events', () => {
 		const eventsBeforeSettle = [{ name: 'pointer_down' }, { name: 'pointer_up' }]
 
 		// allow time for settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		// nothing should have settled
 		expect(events).toMatchObject(eventsBeforeSettle)
@@ -64,7 +65,7 @@ describe('Handles events', () => {
 		}
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -110,7 +111,7 @@ describe('Handles events', () => {
 		expect(eventsBeforeSettle).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -162,7 +163,7 @@ describe('Handles events', () => {
 		expect(events).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -218,7 +219,7 @@ describe('Handles events', () => {
 		expect(events).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject(eventsBeforeSettle)
 

package/src/test/Editor.test.tsx

@@ -14,6 +14,7 @@ import {
 	loadSnapshot,
 	react,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -415,24 +416,24 @@ describe('isFocused', () => {
 	})
 
 	it('becomes true when the container div receives a focus event', () => {
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 
 		editor.elm.focus()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 	})
 
 	it('becomes false when the container div receives a blur event', () => {
 		editor.elm.focus()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 
 		editor.elm.blur()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 
@@ -444,13 +445,13 @@ describe('isFocused', () => {
 		editor.elm.blur()
 		const child = document.createElement('div')
 		editor.elm.appendChild(child)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 		child.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 		child.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 
@@ -466,7 +467,7 @@ describe('isFocused', () => {
 
 		child.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 })
@@ -520,13 +521,13 @@ describe('getShapeUtil', () => {
 	it('throws if that shape type isnt registered', () => {
 		const myMissingShape = { type: 'missing' } as TLShape
 		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type "missing""`
+			`[Error: No shape util found for type "missing"]`
 		)
 	})
 
 	it('throws if that type isnt registered', () => {
 		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type "missing""`
+			`[Error: No shape util found for type "missing"]`
 		)
 	})
 })
@@ -603,14 +604,14 @@ describe('snapshots', () => {
 
 describe('when the user prefers dark UI', () => {
 	beforeEach(() => {
-		window.matchMedia = jest.fn().mockImplementation((query) => {
+		window.matchMedia = vi.fn().mockImplementation((query) => {
 			return {
 				matches: query === '(prefers-color-scheme: dark)',
 				media: query,
 				onchange: null,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-				dispatchEvent: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+				dispatchEvent: vi.fn(),
 			}
 		})
 	})
@@ -630,14 +631,14 @@ describe('when the user prefers dark UI', () => {
 
 describe('when the user prefers light UI', () => {
 	beforeEach(() => {
-		window.matchMedia = jest.fn().mockImplementation((query) => {
+		window.matchMedia = vi.fn().mockImplementation((query) => {
 			return {
 				matches: false,
 				media: query,
 				onchange: null,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-				dispatchEvent: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+				dispatchEvent: vi.fn(),
 			}
 		})
 	})
@@ -722,7 +723,7 @@ describe('dragging', () => {
 })
 
 describe('getShapeVisibility', () => {
-	const getShapeVisibility = jest.fn(((shape: TLShape) => {
+	const getShapeVisibility = vi.fn(((shape: TLShape) => {
 		return shape.meta.visibility as any
 	}) satisfies TldrawEditorProps['getShapeVisibility'])
 

package/src/test/EraserTool.test.ts

@@ -1,9 +1,10 @@
 import { createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ids = {
 	box1: createShapeId('box1'),
@@ -304,7 +305,7 @@ describe('When clicking and dragging', () => {
 
 		editor.expectToBeIn('eraser.erasing')
 
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 
 		expect(editor.getErasingShapeIds()).toEqual([ids.box1])
@@ -330,7 +331,7 @@ describe('When clicking and dragging', () => {
 		editor.expectToBeIn('eraser.idle')
 		editor.pointerDown(-100, -100) // outside of any shapes
 		editor.pointerMove(50, 50) // inside of box1
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 		expect(editor.getErasingShapeIds()).toEqual([ids.box1])
 		editor.cancel()
@@ -345,7 +346,7 @@ describe('When clicking and dragging', () => {
 		editor.expectToBeIn('eraser.idle')
 		editor.pointerDown(275, 275) // in between box2 AND box3, so over of the new group
 		editor.pointerMove(280, 280) // still outside of the new group
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 		expect(editor.getErasingShapeIds()).toEqual([])
 		editor.pointerMove(0, 0)
@@ -360,7 +361,7 @@ describe('When clicking and dragging', () => {
 		editor.setCurrentTool('eraser')
 		editor.pointerDown(325, 25) // directly on frame1, not its children
 		editor.pointerMove(350, 375) // still in the frame, passing through box3
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 		expect(editor.getErasingShapeIds()).toEqual([ids.box3])
 		editor.pointerUp()
@@ -374,7 +375,7 @@ describe('When clicking and dragging', () => {
 		editor.pointerDown() // Above the masked part of box3
 		expect(editor.getErasingShapeIds()).toEqual([])
 		editor.pointerMove(425, 500) // Through the masked part of box3
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 		expect(editor.getErasingShapeIds()).toEqual([])
 		editor.pointerUp()
@@ -402,7 +403,7 @@ describe('When clicking and dragging', () => {
 		editor.pointerDown(-100, -100)
 		expect(editor.getInstanceState().scribbles.length).toBe(0)
 		editor.pointerMove(50, 50)
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 		editor.pointerMove(50, 50)
 		editor.pointerMove(51, 50)
@@ -472,7 +473,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
 		editor.pointerDown(-100, -100) // outside of any shapes
 		editor.pointerMove(99, 99) // next to box1 AND in box2
 
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 
 		// Should include all shapes hit initially
@@ -505,7 +506,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
 		editor.pointerDown(-100, -100) // outside of any shapes
 		editor.pointerMove(99, 99) // next to box1 AND in box2
 
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 
 		// Should include all shapes hit initially
@@ -558,7 +559,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
 		editor.pointerDown(-100, -100) // outside of any shapes
 		editor.pointerMove(99, 99) // next to box1 AND in box2
 
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 
 		// Should include all shapes hit initially
@@ -589,7 +590,7 @@ describe('When holding meta/ctrl key (accel key)', () => {
 		editor.pointerDown(-100, -100) // outside of any shapes
 		editor.pointerMove(99, 99) // next to box1 AND in box2
 
-		jest.advanceTimersByTime(16)
+		vi.advanceTimersByTime(16)
 		expect(editor.getInstanceState().scribbles.length).toBe(1)
 
 		// Should include all shapes hit initially

package/src/test/HandTool.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { HandTool } from '../lib/tools/HandTool/HandTool'
 import { TestEditor, createDefaultShapes } from './TestEditor'
 
@@ -14,7 +15,7 @@ afterEach(() => {
 	editor?.dispose()
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 describe(HandTool, () => {
 	it('Double taps to zoom in', () => {
@@ -22,9 +23,9 @@ describe(HandTool, () => {
 		expect(editor.getZoomLevel()).toBe(1)
 		editor.click()
 		editor.click() // double click!
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(2) // all done
 	})
 
@@ -34,9 +35,9 @@ describe(HandTool, () => {
 		editor.click()
 		editor.click()
 		editor.click() // triple click!
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(0.5) // all done
 	})
 
@@ -48,9 +49,9 @@ describe(HandTool, () => {
 		editor.click()
 		editor.click()
 		editor.click() // quad click!
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(2) // animating
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).toBe(1) // all done
 	})
 
@@ -62,9 +63,9 @@ describe(HandTool, () => {
 		editor.click()
 		editor.click()
 		editor.click() // quad click!
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
+		vi.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,6 +1,7 @@
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 let editor: TestEditor
 

package/src/test/SelectTool.test.ts

@@ -7,6 +7,7 @@ import {
 	createShapeId,
 	toRichText,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -18,7 +19,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -160,7 +161,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)
 
-		jest.advanceTimersByTime(250) // tick tock
+		vi.advanceTimersByTime(250) // tick tock
 
 		// Timer is done! We should have ended the clone.
 		expect(editor.getCurrentPageShapes().length).toBe(1)

package/src/test/TLUserPreferences.test.ts

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

package/src/test/TestEditor.ts

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

package/src/test/TldrawEditor.test.tsx

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