Chore: Upgrade Vitest to v4 (#7797)

## Summary

https://vitest.dev/guide/migration.html#vitest-4

## Changes

- **What**: Update Vitest and some associated dependencies
- **What**: Fix issue with our existing mocks and mock types

## Review Focus

Double check the test updates. I tried to keep the changes minimal.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7797-Chore-Upgrade-Vitest-to-v4-2d96d73d3650810cbe3ac42d7bd6585a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

pnpm-workspace.yaml

@@ -15,7 +15,7 @@ catalog:
   '@nx/playwright': 22.2.6
   '@nx/storybook': 22.2.4
   '@nx/vite': 22.2.6
-  '@pinia/testing': ^0.1.5
+  '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.57.0
   '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
@@ -26,7 +26,7 @@ catalog:
   '@primevue/icons': 4.2.5
   '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
-  '@sentry/vue': ^8.48.0
+  '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
   '@storybook/vue3': ^10.1.9
@@ -39,8 +39,8 @@ catalog:
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
   '@vitejs/plugin-vue': ^6.0.0
-  '@vitest/coverage-v8': ^3.2.4
-  '@vitest/ui': ^3.2.0
+  '@vitest/coverage-v8': ^4.0.16
+  '@vitest/ui': ^4.0.16
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
@@ -59,11 +59,11 @@ catalog:
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   firebase: ^11.6.0
-  globals: ^15.9.0
-  happy-dom: ^15.11.0
+  globals: ^16.5.0
+  happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
-  jsdom: ^26.1.0
+  jsdom: ^27.4.0
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
@@ -72,7 +72,7 @@ catalog:
   oxlint: ^1.33.0
   oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
-  pinia: ^2.1.7
+  pinia: ^3.0.4
   postcss-html: ^1.8.0
   prettier: ^3.7.4
   pretty-bytes: ^7.1.0
@@ -96,13 +96,13 @@ catalog:
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0
-  vitest: ^3.2.4
+  vitest: ^4.0.16
   vue: ^3.5.13
-  vue-component-type-helpers: ^3.0.7
+  vue-component-type-helpers: ^3.2.1
   vue-eslint-parser: ^10.2.0
   vue-i18n: ^9.14.3
   vue-router: ^4.4.3
-  vue-tsc: ^3.1.8
+  vue-tsc: ^3.2.1
   vuefire: ^3.2.1
   yjs: ^13.6.27
   zod: ^3.23.8

src/components/queue/job/useJobErrorReporting.ts

@@ -40,7 +40,7 @@ export const extractExecutionError = (
   }
 }
 
-type UseJobErrorReportingOptions = {
+export type UseJobErrorReportingOptions = {
   taskForJob: ComputedRef<TaskItemImpl | null>
   copyToClipboard: CopyHandler
   dialog: JobErrorDialogService

src/platform/assets/composables/useMediaAssetGalleryStore.test.ts

@@ -7,10 +7,14 @@ import type { AssetMeta } from '../schemas/mediaAssetSchema'
 import { useMediaAssetGalleryStore } from './useMediaAssetGalleryStore'
 
 vi.mock('@/stores/queueStore', () => ({
-  ResultItemImpl: vi.fn().mockImplementation((data) => ({
-    ...data,
-    url: ''
-  }))
+  ResultItemImpl: vi
+    .fn<typeof ResultItemImpl>()
+    .mockImplementation(function (data) {
+      Object.assign(this, {
+        ...data,
+        url: ''
+      })
+    })
 }))
 
 describe('useMediaAssetGalleryStore', () => {

src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts

@@ -133,7 +133,7 @@ const createMouseEvent = (
 
 describe('useNodePointerInteractions', () => {
   beforeEach(async () => {
-    vi.restoreAllMocks()
+    vi.resetAllMocks()
     selectedItemsState.items = []
     setActivePinia(createTestingPinia())
   })

src/utils/queueDisplay.ts

@@ -3,7 +3,7 @@ import type { JobState } from '@/types/queue'
 import { formatDuration } from '@/utils/formatUtil'
 import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
 
-type BuildJobDisplayCtx = {
+export type BuildJobDisplayCtx = {
   t: (k: string, v?: Record<string, any>) => string
   locale: string
   formatClockTimeFn: (ts: number, locale: string) => string

tests-ui/tests/api.featureFlags.test.ts

@@ -24,7 +24,9 @@ describe('API Feature Flags', () => {
     }
 
     // Mock WebSocket constructor
-    global.WebSocket = vi.fn().mockImplementation(() => mockWebSocket) as any
+    vi.stubGlobal('WebSocket', function (this: WebSocket) {
+      Object.assign(this, mockWebSocket)
+    })
 
     // Reset API state
     api.serverFeatureFlags = {}

tests-ui/tests/components/graph/ZoomControlsModal.test.ts

@@ -70,7 +70,7 @@ const createWrapper = (props = {}) => {
 
 describe('ZoomControlsModal', () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
+    vi.resetAllMocks()
   })
 
   it('should execute zoom in command when zoom in button is clicked', async () => {

tests-ui/tests/components/queue/useJobErrorReporting.test.ts

@@ -4,7 +4,10 @@ import type { ComputedRef } from 'vue'
 
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import type { TaskItemImpl } from '@/stores/queueStore'
-import type { JobErrorDialogService } from '@/components/queue/job/useJobErrorReporting'
+import type {
+  JobErrorDialogService,
+  UseJobErrorReportingOptions
+} from '@/components/queue/job/useJobErrorReporting'
 import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
 
 const createExecutionErrorMessage = (
@@ -90,9 +93,9 @@ describe('extractExecutionError', () => {
 describe('useJobErrorReporting', () => {
   let taskState = ref<TaskItemImpl | null>(null)
   let taskForJob: ComputedRef<TaskItemImpl | null>
-  let copyToClipboard: ReturnType<typeof vi.fn>
-  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
-  let showErrorDialog: ReturnType<typeof vi.fn>
+  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
+  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
+  let showErrorDialog: JobErrorDialogService['showErrorDialog']
   let dialog: JobErrorDialogService
   let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
 
@@ -146,7 +149,7 @@ describe('useJobErrorReporting', () => {
     expect(copyToClipboard).toHaveBeenCalledTimes(1)
     expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
 
-    copyToClipboard.mockClear()
+    vi.mocked(copyToClipboard).mockClear()
     taskState.value = createTaskWithMessages([])
     composable.copyErrorMessage()
     expect(copyToClipboard).not.toHaveBeenCalled()
@@ -174,7 +177,7 @@ describe('useJobErrorReporting', () => {
     composable.reportJobError()
     expect(showExecutionErrorDialog).not.toHaveBeenCalled()
     expect(showErrorDialog).toHaveBeenCalledTimes(1)
-    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
+    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
     expect(errorArg).toBeInstanceOf(Error)
     expect(errorArg.message).toBe(message)
     expect(optionsArg).toEqual({ reportType: 'queueJobError' })

tests-ui/tests/composables/maskeditor/useCanvasHistory.test.ts

@@ -43,7 +43,7 @@ describe('useCanvasHistory', () => {
         return rafCallCount
       }
     )
-    vi.spyOn(window, 'alert').mockImplementation(() => {})
+    vi.stubGlobal('alert', () => {})
 
     const createMockImageData = () => {
       return {

tests-ui/tests/composables/nodePack/usePacksSelection.test.ts

@@ -20,7 +20,7 @@ type NodePack = components['schemas']['Node']
 
 describe('usePacksSelection', () => {
   let managerStore: ReturnType<typeof useComfyManagerStore>
-  let mockIsPackInstalled: ReturnType<typeof vi.fn>
+  let mockIsPackInstalled: (packName: string | undefined) => boolean
 
   const createMockPack = (id: string): NodePack => ({
     id,
@@ -58,7 +58,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack3')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => {
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => {
         return id === 'pack1' || id === 'pack3'
       })
 
@@ -76,7 +76,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(false)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(false)
 
       const { installedPacks } = usePacksSelection(nodePacks)
 
@@ -85,7 +85,7 @@ describe('usePacksSelection', () => {
 
     it('should update when nodePacks ref changes', () => {
       const nodePacks = ref<NodePack[]>([createMockPack('pack1')])
-      mockIsPackInstalled.mockReturnValue(true)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(true)
 
       const { installedPacks } = usePacksSelection(nodePacks)
       expect(installedPacks.value).toHaveLength(1)
@@ -109,7 +109,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack3')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => {
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => {
         return id === 'pack1'
       })
 
@@ -126,7 +126,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(false)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(false)
 
       const { notInstalledPacks } = usePacksSelection(nodePacks)
 
@@ -141,7 +141,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(true)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(true)
 
       const { isAllInstalled } = usePacksSelection(nodePacks)
 
@@ -154,7 +154,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack1')
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => id === 'pack1')
 
       const { isAllInstalled } = usePacksSelection(nodePacks)
 
@@ -177,7 +177,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(false)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(false)
 
       const { isNoneInstalled } = usePacksSelection(nodePacks)
 
@@ -190,7 +190,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack1')
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => id === 'pack1')
 
       const { isNoneInstalled } = usePacksSelection(nodePacks)
 
@@ -214,7 +214,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack3')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => {
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => {
         return id === 'pack1' || id === 'pack2'
       })
 
@@ -229,7 +229,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(true)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(true)
 
       const { isMixed } = usePacksSelection(nodePacks)
 
@@ -242,7 +242,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(false)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(false)
 
       const { isMixed } = usePacksSelection(nodePacks)
 
@@ -265,7 +265,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(true)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(true)
 
       const { selectionState } = usePacksSelection(nodePacks)
 
@@ -278,7 +278,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(false)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(false)
 
       const { selectionState } = usePacksSelection(nodePacks)
 
@@ -292,7 +292,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack3')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack1')
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => id === 'pack1')
 
       const { selectionState } = usePacksSelection(nodePacks)
 
@@ -305,13 +305,13 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockReturnValue(false)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(false)
 
       const { selectionState } = usePacksSelection(nodePacks)
       expect(selectionState.value).toBe('none-installed')
 
       // Change mock to simulate installation
-      mockIsPackInstalled.mockReturnValue(true)
+      vi.mocked(mockIsPackInstalled).mockReturnValue(true)
 
       // Force reactivity update
       nodePacks.value = [...nodePacks.value]
@@ -327,7 +327,7 @@ describe('usePacksSelection', () => {
         createMockPack('pack2')
       ])
 
-      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack2')
+      vi.mocked(mockIsPackInstalled).mockImplementation((id) => id === 'pack2')
 
       const { installedPacks, notInstalledPacks } = usePacksSelection(nodePacks)
 
@@ -347,8 +347,8 @@ describe('usePacksSelection', () => {
         pack2: false
       }
 
-      mockIsPackInstalled.mockImplementation(
-        (id: string) => installationStatus[id] || false
+      vi.mocked(mockIsPackInstalled).mockImplementation(
+        (id) => (id && installationStatus[id]) || false
       )
 
       const { installedPacks, notInstalledPacks, selectionState } =

tests-ui/tests/composables/useCachedRequest.test.ts

@@ -3,8 +3,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useCachedRequest } from '@/composables/useCachedRequest'
 
 describe('useCachedRequest', () => {
-  let mockRequestFn: ReturnType<typeof vi.fn>
-  let abortSpy: ReturnType<typeof vi.fn>
+  let mockRequestFn: (
+    params: any,
+    signal?: AbortSignal
+  ) => Promise<unknown | null>
+  let abortSpy: () => void
 
   beforeEach(() => {
     vi.clearAllMocks()

tests-ui/tests/composables/useJobList.test.ts

@@ -5,6 +5,9 @@ import type { Ref } from 'vue'
 
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobState } from '@/types/queue'
+import { buildJobDisplay } from '@/utils/queueDisplay'
+import type { BuildJobDisplayCtx } from '@/utils/queueDisplay'
+import type { TaskItemImpl } from '@/stores/queueStore'
 
 type TestTask = {
   promptId: string
@@ -43,19 +46,8 @@ vi.mock('vue-i18n', () => ({
   }
 }))
 
-let stMock: ReturnType<typeof vi.fn>
-const ensureStMock = () => {
-  if (!stMock) {
-    stMock = vi.fn(
-      (key: string, fallback?: string) => `i18n(${key})-${fallback}`
-    )
-  }
-  return stMock
-}
 vi.mock('@/i18n', () => ({
-  st: (...args: any[]) => {
-    return ensureStMock()(...args)
-  }
+  st: vi.fn((key: string, fallback?: string) => `i18n(${key})-${fallback}`)
 }))
 
 let totalPercent: Ref<number>
@@ -75,40 +67,24 @@ vi.mock('@/composables/queue/useQueueProgress', () => ({
   }
 }))
 
-let buildJobDisplayMock: ReturnType<typeof vi.fn>
-const ensureBuildDisplayMock = () => {
-  if (!buildJobDisplayMock) {
-    buildJobDisplayMock = vi.fn((task: any, state: JobState, options: any) => ({
+vi.mock('@/utils/queueDisplay', () => ({
+  buildJobDisplay: vi.fn(
+    (task: TaskItemImpl, state: JobState, options: BuildJobDisplayCtx) => ({
       primary: `Job ${task.promptId}`,
       secondary: `${state} meta`,
       iconName: `${state}-icon`,
       iconImageUrl: undefined,
       showClear: state === 'failed',
       options
-    }))
-  }
-  return buildJobDisplayMock
-}
-vi.mock('@/utils/queueDisplay', () => ({
-  buildJobDisplay: (...args: any[]) => {
-    return ensureBuildDisplayMock()(...args)
-  }
+    })
+  )
 }))
 
-let jobStateFromTaskMock: ReturnType<typeof vi.fn>
-const ensureJobStateMock = () => {
-  if (!jobStateFromTaskMock) {
-    jobStateFromTaskMock = vi.fn(
-      (task: TestTask, isInitializing?: boolean): JobState =>
-        task.mockState ?? (isInitializing ? 'running' : 'completed')
-    )
-  }
-  return jobStateFromTaskMock
-}
 vi.mock('@/utils/queueUtil', () => ({
-  jobStateFromTask: (...args: any[]) => {
-    return ensureJobStateMock()(...args)
-  }
+  jobStateFromTask: vi.fn(
+    (task: TestTask, isInitializing?: boolean): JobState =>
+      task.mockState ?? (isInitializing ? 'running' : 'completed')
+  )
 }))
 
 let queueStoreMock: {
@@ -137,7 +113,7 @@ let executionStoreMock: {
   executingNode: null | { title?: string; type?: string }
   isPromptInitializing: (promptId?: string | number) => boolean
 }
-let isPromptInitializingMock: ReturnType<typeof vi.fn>
+let isPromptInitializingMock: (promptId?: string | number) => boolean
 const ensureExecutionStore = () => {
   if (!isPromptInitializingMock) {
     isPromptInitializingMock = vi.fn(() => false)
@@ -221,13 +197,9 @@ const resetStores = () => {
   localeRef.value = 'en-US'
   tMock.mockClear()
 
-  if (stMock) stMock.mockClear()
-  if (buildJobDisplayMock) buildJobDisplayMock.mockClear()
-  if (jobStateFromTaskMock) jobStateFromTaskMock.mockClear()
-
   if (isPromptInitializingMock) {
-    isPromptInitializingMock.mockReset()
-    isPromptInitializingMock.mockReturnValue(false)
+    vi.mocked(isPromptInitializingMock).mockReset()
+    vi.mocked(isPromptInitializingMock).mockReturnValue(false)
   }
 }
 
@@ -240,6 +212,7 @@ describe('useJobList', () => {
   let api: ReturnType<typeof useJobList> | null = null
 
   beforeEach(() => {
+    vi.resetAllMocks()
     resetStores()
     wrapper?.unmount()
     wrapper = null
@@ -270,18 +243,18 @@ describe('useJobList', () => {
     await flush()
 
     jobItems.value
-    expect(buildJobDisplayMock).toHaveBeenCalledWith(
+    expect(buildJobDisplay).toHaveBeenCalledWith(
       expect.anything(),
       'pending',
       expect.objectContaining({ showAddedHint: true })
     )
 
-    buildJobDisplayMock.mockClear()
+    vi.mocked(buildJobDisplay).mockClear()
     await vi.advanceTimersByTimeAsync(3000)
     await flush()
 
     jobItems.value
-    expect(buildJobDisplayMock).toHaveBeenCalledWith(
+    expect(buildJobDisplay).toHaveBeenCalledWith(
       expect.anything(),
       'pending',
       expect.objectContaining({ showAddedHint: false })
@@ -303,13 +276,13 @@ describe('useJobList', () => {
     await flush()
     expect(vi.getTimerCount()).toBe(0)
 
-    buildJobDisplayMock.mockClear()
+    vi.mocked(buildJobDisplay).mockClear()
     queueStoreMock.pendingTasks = [
       createTask({ promptId: taskId, queueIndex: 2, mockState: 'pending' })
     ]
     await flush()
     jobItems.value
-    expect(buildJobDisplayMock).toHaveBeenCalledWith(
+    expect(buildJobDisplay).toHaveBeenCalledWith(
       expect.anything(),
       'pending',
       expect.objectContaining({ showAddedHint: true })

tests-ui/tests/composables/useLoad3d.test.ts

@@ -117,7 +117,9 @@ describe('useLoad3d', () => {
       }
     }
 
-    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+    vi.mocked(Load3d).mockImplementation(function () {
+      Object.assign(this, mockLoad3d)
+    })
 
     mockToastStore = {
       addAlert: vi.fn()
@@ -289,7 +291,7 @@ describe('useLoad3d', () => {
     })
 
     it('should handle initialization errors', async () => {
-      vi.mocked(Load3d).mockImplementationOnce(() => {
+      vi.mocked(Load3d).mockImplementationOnce(function () {
         throw new Error('Load3d creation failed')
       })
 

tests-ui/tests/composables/useLoad3dDrag.test.ts

@@ -35,7 +35,7 @@ function createMockDragEvent(
 
 describe('useLoad3dDrag', () => {
   let mockToastStore: any
-  let mockOnModelDrop: ReturnType<typeof vi.fn>
+  let mockOnModelDrop: (file: File) => void | Promise<void>
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -199,7 +199,7 @@ describe('useLoad3dDrag', () => {
       const extensions = ['.gltf', '.glb', '.obj', '.fbx', '.stl']
 
       for (const ext of extensions) {
-        mockOnModelDrop.mockClear()
+        vi.mocked(mockOnModelDrop).mockClear()
 
         const modelFile = new File([], `model${ext}`)
         const event = createMockDragEvent('drop', {

tests-ui/tests/composables/useLoad3dViewer.test.ts

@@ -120,7 +120,9 @@ describe('useLoad3dViewer', () => {
       forceRender: vi.fn()
     }
 
-    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+    vi.mocked(Load3d).mockImplementation(function () {
+      Object.assign(this, mockLoad3d)
+    })
 
     mockLoad3dService = {
       copyLoad3dState: vi.fn().mockResolvedValue(undefined),
@@ -198,7 +200,7 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle initialization errors', async () => {
-      vi.mocked(Load3d).mockImplementationOnce(() => {
+      vi.mocked(Load3d).mockImplementationOnce(function () {
         throw new Error('Load3d creation failed')
       })
 
@@ -312,7 +314,7 @@ describe('useLoad3dViewer', () => {
     })
 
     it('should handle watcher errors gracefully', async () => {
-      mockLoad3d.setBackgroundColor.mockImplementationOnce(() => {
+      mockLoad3d.setBackgroundColor.mockImplementationOnce(function () {
         throw new Error('Color update failed')
       })
 

tests-ui/tests/lib/litegraph/src/widgets/ComboWidget.test.ts

@@ -10,14 +10,6 @@ const { LGraphCanvas } = await vi.importActual<
 >('@/lib/litegraph/src/LGraphCanvas')
 type LGraphCanvasType = InstanceType<typeof LGraphCanvas>
 
-type ContextMenuInstance = {
-  addItem?: (
-    name: string,
-    value: string,
-    options: { callback?: (value: string) => void; className?: string }
-  ) => void
-}
-
 interface MockWidgetConfig extends Omit<IComboWidget, 'options'> {
   options: IComboWidget['options']
 }
@@ -465,12 +457,12 @@ describe('ComboWidget', () => {
       node.size = [200, 30]
 
       let capturedCallback: ((value: string) => void) | undefined
-      const mockContextMenu = vi.fn((_values, options) => {
-        capturedCallback = options.callback
-        return {} as ContextMenuInstance
-      })
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      const mockContextMenu = vi
+        .fn<typeof LiteGraph.ContextMenu>()
+        .mockImplementation(function (_values, options) {
+          capturedCallback = options.callback
+        })
+      LiteGraph.ContextMenu = mockContextMenu
 
       const setValueSpy = vi.spyOn(widget, 'setValue')
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
@@ -507,12 +499,12 @@ describe('ComboWidget', () => {
       node.size = [200, 30]
 
       let capturedCallback: ((value: string) => void) | undefined
-      const mockContextMenu = vi.fn((_values, options) => {
-        capturedCallback = options.callback
-        return {} as ContextMenuInstance
-      })
-      LiteGraph.ContextMenu =
-        mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+      const mockContextMenu = vi
+        .fn<typeof LiteGraph.ContextMenu>()
+        .mockImplementation(function (_values, options) {
+          capturedCallback = options.callback
+        })
+      LiteGraph.ContextMenu = mockContextMenu
 
       const setValueSpy = vi.spyOn(widget, 'setValue')
       widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
@@ -653,7 +645,7 @@ describe('ComboWidget', () => {
       })
 
       it('should handle getOptionLabel error gracefully', () => {
-        const mockGetOptionLabel = vi.fn().mockImplementation(() => {
+        const mockGetOptionLabel = vi.fn().mockImplementation(function () {
           throw new Error('Formatting failed')
         })
         const consoleErrorSpy = vi
@@ -768,9 +760,12 @@ describe('ComboWidget', () => {
         node.size = [200, 30]
 
         const mockAddItem = vi.fn()
-        const mockContextMenu = vi.fn(() => ({ addItem: mockAddItem }))
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        const mockContextMenu = vi
+          .fn<typeof LiteGraph.ContextMenu>()
+          .mockImplementation(function () {
+            this.addItem = mockAddItem
+          })
+        LiteGraph.ContextMenu = mockContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -827,12 +822,13 @@ describe('ComboWidget', () => {
 
         const mockAddItem = vi.fn()
         let capturedCallback: ((value: string) => void) | undefined
-        const mockContextMenu = vi.fn((_values, options) => {
-          capturedCallback = options.callback
-          return { addItem: mockAddItem }
-        })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        const mockContextMenu = vi
+          .fn<typeof LiteGraph.ContextMenu>()
+          .mockImplementation(function (_values, options) {
+            capturedCallback = options.callback
+            this.addItem = mockAddItem
+          })
+        LiteGraph.ContextMenu = mockContextMenu
 
         const setValueSpy = vi.spyOn(widget, 'setValue')
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
@@ -879,12 +875,13 @@ describe('ComboWidget', () => {
         const mockAddItem = vi.fn()
         let capturedCallback: ((value: string) => void) | undefined
 
-        const mockContextMenu = vi.fn((_values, options) => {
-          capturedCallback = options.callback
-          return { addItem: mockAddItem } as ContextMenuInstance
-        })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        const mockContextMenu = vi
+          .fn<typeof LiteGraph.ContextMenu>()
+          .mockImplementation(function (_values, options) {
+            capturedCallback = options.callback
+            this.addItem = mockAddItem
+          })
+        LiteGraph.ContextMenu = mockContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -931,7 +928,7 @@ describe('ComboWidget', () => {
         const mockGetOptionLabel = vi
           .fn()
           .mockReturnValueOnce('Beautiful Sunset.png')
-          .mockImplementationOnce(() => {
+          .mockImplementationOnce(function () {
             throw new Error('Formatting failed')
           })
 
@@ -957,11 +954,12 @@ describe('ComboWidget', () => {
           .mockImplementation(() => {})
 
         const mockAddItem = vi.fn()
-        const mockContextMenu = vi.fn(() => {
-          return { addItem: mockAddItem } as ContextMenuInstance
-        })
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        const mockContextMenu = vi
+          .fn<typeof LiteGraph.ContextMenu>()
+          .mockImplementation(function () {
+            this.addItem = mockAddItem
+          })
+        LiteGraph.ContextMenu = mockContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 
@@ -1007,9 +1005,8 @@ describe('ComboWidget', () => {
         node.pos = [50, 50]
         node.size = [200, 30]
 
-        const mockContextMenu = vi.fn()
-        LiteGraph.ContextMenu =
-          mockContextMenu as unknown as typeof LiteGraph.ContextMenu
+        const mockContextMenu = vi.fn<typeof LiteGraph.ContextMenu>()
+        LiteGraph.ContextMenu = mockContextMenu
 
         widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
 

tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts

@@ -1,21 +1,21 @@
 // TODO: Fix these tests after migration
 import { afterEach, describe, expect, vi } from 'vitest'
 
-import type { LGraph, Reroute } from '@/lib/litegraph/src/litegraph'
-import {
-  type CanvasPointerEvent,
-  LGraphNode,
-  LLink,
-  LinkConnector,
-  type RerouteId
+import type {
+  LGraph,
+  Reroute,
+  CanvasPointerEvent,
+  RerouteId
 } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode, LLink, LinkConnector } from '@/lib/litegraph/src/litegraph'
 
 import { test as baseTest } from './fixtures/testExtensions'
+import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
 
 interface TestContext {
   graph: LGraph
   connector: LinkConnector
-  setConnectingLinks: ReturnType<typeof vi.fn>
+  setConnectingLinks: (value: ConnectingLink[]) => void
   createTestNode: (id: number) => LGraphNode
   reroutesBeforeTest: [rerouteId: RerouteId, reroute: Reroute][]
   validateIntegrityNoChanges: () => void
@@ -41,9 +41,8 @@ const test = baseTest.extend<TestContext>({
     await use(reroutesComplexGraph)
   },
   setConnectingLinks: async (
-    // eslint-disable-next-line no-empty-pattern
     {},
-    use: (mock: ReturnType<typeof vi.fn>) => Promise<void>
+    use: (mock: (value: ConnectingLink[]) => void) => Promise<void>
   ) => {
     const mock = vi.fn()
     await use(mock)

tests-ui/tests/litegraph/core/LinkConnector.test.ts

@@ -1,23 +1,26 @@
 import { test as baseTest, describe, expect, vi } from 'vitest'
 
-import { LinkConnector } from '@/lib/litegraph/src/litegraph'
-import type { MovingInputLink } from '@/lib/litegraph/src/litegraph'
-import { ToInputRenderLink } from '@/lib/litegraph/src/litegraph'
-import type { LinkNetwork } from '@/lib/litegraph/src/litegraph'
-import type { ISlotType } from '@/lib/litegraph/src/litegraph'
+import type {
+  MovingInputLink,
+  RerouteId,
+  LinkNetwork,
+  ISlotType
+} from '@/lib/litegraph/src/litegraph'
 import {
   LGraph,
   LGraphNode,
   LLink,
   Reroute,
-  type RerouteId
+  LinkConnector,
+  ToInputRenderLink,
+  LinkDirection
 } from '@/lib/litegraph/src/litegraph'
-import { LinkDirection } from '@/lib/litegraph/src/litegraph'
+import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
 
 interface TestContext {
   network: LinkNetwork & { add(node: LGraphNode): void }
   connector: LinkConnector
-  setConnectingLinks: ReturnType<typeof vi.fn>
+  setConnectingLinks: (value: ConnectingLink[]) => void
   createTestNode: (id: number, slotType?: ISlotType) => LGraphNode
   createTestLink: (
     id: number,
@@ -28,7 +31,6 @@ interface TestContext {
 }
 
 const test = baseTest.extend<TestContext>({
-  // eslint-disable-next-line no-empty-pattern
   network: async ({}, use) => {
     const graph = new LGraph()
     const floatingLinks = new Map<number, LLink>()
@@ -53,9 +55,8 @@ const test = baseTest.extend<TestContext>({
   },
 
   setConnectingLinks: async (
-    // eslint-disable-next-line no-empty-pattern
     {},
-    use: (mock: ReturnType<typeof vi.fn>) => Promise<void>
+    use: (mock: (value: ConnectingLink[]) => void) => Promise<void>
   ) => {
     const mock = vi.fn()
     await use(mock)

tests-ui/tests/renderer/extensions/minimap/composables/useMinimapGraph.test.ts

@@ -19,7 +19,7 @@ vi.mock('@/scripts/api', () => ({
 
 describe('useMinimapGraph', () => {
   let mockGraph: LGraph
-  let onGraphChangedMock: ReturnType<typeof vi.fn>
+  let onGraphChangedMock: () => void
 
   beforeEach(() => {
     vi.clearAllMocks()

tests-ui/tests/renderer/extensions/minimap/composables/useMinimapInteraction.test.ts

@@ -7,7 +7,7 @@ import type { MinimapCanvas } from '@/renderer/extensions/minimap/types'
 describe('useMinimapInteraction', () => {
   let mockContainer: HTMLDivElement
   let mockCanvas: MinimapCanvas
-  let centerViewOnMock: ReturnType<typeof vi.fn>
+  let centerViewOnMock: (worldX: number, worldY: number) => void
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -29,7 +29,7 @@ describe('useMinimapInteraction', () => {
       setDirty: vi.fn()
     } as any
 
-    centerViewOnMock = vi.fn()
+    centerViewOnMock = vi.fn<(worldX: number, worldY: number) => void>()
   })
 
   it('should initialize with default values', () => {

tests-ui/tests/services/keybindingService.escape.test.ts

@@ -26,15 +26,15 @@ vi.mock('@/stores/dialogStore', () => ({
 
 describe('keybindingService - Escape key handling', () => {
   let keybindingService: ReturnType<typeof useKeybindingService>
-  let mockCommandExecute: ReturnType<typeof vi.fn>
+  let mockCommandExecute: ReturnType<typeof useCommandStore>['execute']
 
   beforeEach(() => {
     vi.clearAllMocks()
     setActivePinia(createPinia())
 
     // Mock command store execute
-    mockCommandExecute = vi.fn()
     const commandStore = useCommandStore()
+    mockCommandExecute = vi.fn()
     commandStore.execute = mockCommandExecute
 
     // Reset dialog store mock to empty