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>

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