chore(ui): coordinated toolchain majors — vitest 4 + @vitest/coverage-v8 4 + @vitejs/plugin-react 6 + vite 8

ui/package.json

@@ -51,13 +51,14 @@
     "@types/node": "^25",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^5.1.3",
-    "@vitest/coverage-v8": "^3.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "jsdom": "^29.0.0",
     "tailwindcss": "^4",
     "typescript": "^5",
-    "vitest": "^3.2.3"
+    "vite": "^8.1.0",
+    "vitest": "^4.1.0"
   }
 }

ui/src/components/hls-player.test.tsx

@@ -1,31 +1,26 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-// Mock hls.js before imports
+// Mock hls.js before imports.
+// Use a class so `new Hls()` works under vitest 4 (vi.fn(() => instance) is no longer
+// constructable). Static members (isSupported/Events/ErrorTypes) are attached to the class.
 vi.mock('hls.js', () => {
-  const mockHlsInstance = {
-    loadSource: vi.fn(),
-    attachMedia: vi.fn(),
-    on: vi.fn(),
-    destroy: vi.fn(),
-    recoverMediaError: vi.fn(),
-  }
-
-  const MockHls = vi.fn(() => mockHlsInstance) as unknown as {
-    isSupported: () => boolean
-    Events: Record<string, string>
-    ErrorTypes: Record<string, string>
-    new(): typeof mockHlsInstance
-  }
-
-  MockHls.isSupported = vi.fn().mockReturnValue(true)
-  MockHls.Events = {
-    MANIFEST_PARSED: 'hlsManifestParsed',
-    ERROR: 'hlsError',
-  }
-  MockHls.ErrorTypes = {
-    NETWORK_ERROR: 'networkError',
-    MEDIA_ERROR: 'mediaError',
+  class MockHls {
+    loadSource = vi.fn()
+    attachMedia = vi.fn()
+    on = vi.fn()
+    destroy = vi.fn()
+    recoverMediaError = vi.fn()
+
+    static isSupported = vi.fn().mockReturnValue(true)
+    static Events = {
+      MANIFEST_PARSED: 'hlsManifestParsed',
+      ERROR: 'hlsError',
+    }
+    static ErrorTypes = {
+      NETWORK_ERROR: 'networkError',
+      MEDIA_ERROR: 'mediaError',
+    }
   }
 
   return {

ui/vitest.setup.ts

@@ -4,12 +4,15 @@ import React from 'react'
 // Mock scrollIntoView for Radix UI components
 Element.prototype.scrollIntoView = vi.fn()
 
-// Mock ResizeObserver for Radix UI components
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
+// Mock ResizeObserver for Radix UI components.
+// Use a class so `new ResizeObserver()` works under vitest 4 (vi.fn().mockImplementation
+// no longer produces a constructable mock).
+class MockResizeObserver {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+}
+global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
 
 // Mock PointerEvent for Radix UI components
 class MockPointerEvent extends Event {