chore: vitest 4 for web, cli, and e2e (#26668)

web/package.json

@@ -83,7 +83,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.4.2",
     "@types/qrcode": "^1.5.5",
-    "@vitest/coverage-v8": "^3.0.0",
+    "@vitest/coverage-v8": "^4.0.0",
     "dotenv": "^17.0.0",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
@@ -105,7 +105,7 @@
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.45.0",
     "vite": "^7.1.2",
-    "vitest": "^3.0.0"
+    "vitest": "^4.0.0"
   },
   "volta": {
     "node": "24.13.1"

web/src/lib/__mocks__/animate.mock.ts

@@ -2,7 +2,7 @@ import { tick } from 'svelte';
 import { vi } from 'vitest';
 
 export const getAnimateMock = () =>
-  vi.fn().mockImplementation(() => {
+  vi.fn().mockImplementation(function () {
     let onfinish: (() => void) | null = null;
     void tick().then(() => onfinish?.());
 

web/src/lib/__mocks__/intersection-observer.mock.ts

@@ -1,9 +1,11 @@
 import { vi } from 'vitest';
 
 export const getIntersectionObserverMock = () =>
-  vi.fn(() => ({
-    disconnect: vi.fn(),
-    observe: vi.fn(),
-    takeRecords: vi.fn(),
-    unobserve: vi.fn(),
-  }));
+  vi.fn(function () {
+    return {
+      disconnect: vi.fn(),
+      observe: vi.fn(),
+      takeRecords: vi.fn(),
+      unobserve: vi.fn(),
+    };
+  });

web/src/lib/__mocks__/resize-observer.mock.ts

@@ -1,8 +1,10 @@
 import { vi } from 'vitest';
 
 export const getResizeObserverMock = () =>
-  vi.fn(() => ({
-    disconnect: vi.fn(),
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-  }));
+  vi.fn(function () {
+    return {
+      disconnect: vi.fn(),
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+    };
+  });

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -18,18 +18,19 @@ describe('AssetViewerNavBar component', () => {
   };
 
   beforeAll(() => {
-    Element.prototype.animate = vi.fn().mockImplementation(() => ({
-      cancel: () => {},
-    }));
+    Element.prototype.animate = vi.fn().mockImplementation(function () {
+      return {
+        cancel: () => {},
+      };
+    });
     vi.stubGlobal('ResizeObserver', getResizeObserverMock());
-    vi.mock(import('$lib/managers/feature-flags-manager.svelte'), () => {
+    vi.mock(import('$lib/managers/feature-flags-manager.svelte'), function () {
       return {
         featureFlagsManager: {
           init: vi.fn(),
           loadFeatureFlags: vi.fn(),
-          value: { trash: true, smartSearch: true },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any,
+          value: { smartSearch: true, trash: true },
+        } as never,
       };
     });
   });

web/src/lib/components/assets/thumbnail/__test__/thumbnail.spec.ts

@@ -8,16 +8,18 @@ vi.hoisted(() => {
   Object.defineProperty(globalThis, 'matchMedia', {
     writable: true,
     enumerable: true,
-    value: vi.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: vi.fn(), // deprecated
-      removeListener: vi.fn(), // deprecated
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
+    value: vi.fn().mockImplementation(function (query) {
+      return {
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      };
+    }),
   });
 });
 

web/src/test-data/setup.ts

@@ -3,19 +3,23 @@ import { init } from 'svelte-i18n';
 
 beforeAll(async () => {
   await init({ fallbackLocale: 'dev' });
-  Element.prototype.animate = vi.fn().mockImplementation(() => ({ cancel: () => {}, finished: Promise.resolve() }));
+  Element.prototype.animate = vi.fn().mockImplementation(function () {
+    return { cancel: () => {}, finished: Promise.resolve() };
+  });
 });
 
 Object.defineProperty(globalThis, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+  value: vi.fn().mockImplementation(function (query) {
+    return {
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    };
+  }),
 });
 
 vi.mock('$env/dynamic/public', () => {