chore: upgrade vite to v8 and vitest to v4 (#44833)

Upgrade vite and vitest to their latest major versions across the
monorepo, along with related packages.

**Changed:**
- `vite` catalog: `^7.3.2` → `^8.0.8` (Rolldown replaces esbuild/Rollup)
- `vitest` catalog: `^3.2.0` → `^4.1.4`
- `@vitejs/plugin-react`: `^4.3.4` → `^6.0.1`
- `@vitest/coverage-v8`: `^3.2.0` → `^4.1.4`
- `@vitest/ui`: `^3.2.0` → `^4.1.4`
- `vite-tsconfig-paths`: `^4.3.2` / `^5.1.4` → `^6.1.1`

**Pinned to vite 7:**
- `apps/lite-studio` — `@react-router/dev` hasn't declared vite 8
support yet
- `blocks/vue` — Nuxt plugins (`vite-plugin-inspect`, `vite-dev-rpc`,
`vite-hot-client`, `vite-plugin-vue-tracer`) haven't declared vite 8
support yet

**Test fixes for vitest 4 breaking changes:**
- **`apps/studio/lib/api/snippets.utils.test.ts`** — Replaced
`vi.mock('fs/promises')` automock with an explicit factory. Vitest 4's
automocking doesn't create mock functions for getter-based exports on
Node built-ins, so `mockedFS.access.mockResolvedValue` etc. were
`undefined`.
- **`apps/studio/lib/api/self-hosted/functions/index.test.ts`** —
Changed `mockReturnValue` to `mockImplementation(function() { ... })`
for a constructor mock. Vitest 4 no longer allows `mockReturnValue` when
the mock is called with `new`.
- **`apps/studio/tests/pages/api/mcp/index.test.ts`** — Changed arrow
function to regular `function` in `mockImplementation` for
`StreamableHTTPServerTransport`. Arrow functions can't be constructors,
and vitest 4 now enforces this.
- **`packages/ui-patterns/vitest.setup.ts`** — Changed `ResizeObserver`
mock from arrow function to regular `function` for the same constructor
enforcement reason. This was crashing Radix popover rendering in jsdom.

## To test

- `pnpm test:studio` — all 226 test files should pass
- `pnpm --filter ui-patterns vitest run` — all 183 tests should pass
- `pnpm --filter www test -- --run` — all 19 tests should pass
- `pnpm --filter ui vitest run` — all tests should pass
- `pnpm --filter dev-tools vitest run` — all tests should pass
- `pnpm --filter ai-commands vitest run` — all tests should pass

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Standardized and updated development tooling versions and version
sources for consistent installs across the repo (Vite, Vitest,
vite-tsconfig-paths and related plugins/catalog entries).
* **Tests**
* Improved test mocks and typings (updated mock
factories/implementations and tightened spy/type assertions) to increase
test reliability and compatibility with updated tooling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>

apps/docs/package.json

@@ -173,7 +173,7 @@
     "typescript": "catalog:",
     "unist-util-visit-parents": "5.1.3",
     "vite": "catalog:",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "catalog:",
     "vitest": "catalog:"
   }
 }

apps/lite-studio/package.json

@@ -30,7 +30,7 @@
     "postcss": "^8.5.8",
     "tailwindcss": "catalog:",
     "tsconfig": "workspace:*",
-    "vite": "catalog:",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "^7.3.2",
+    "vite-tsconfig-paths": "catalog:"
   }
 }

apps/studio/components/interfaces/Support/__tests__/SupportFormPage.test.tsx

@@ -108,7 +108,7 @@ vi.mock(import('@/lib/breadcrumbs'), async (importOriginal) => {
 
 let createSupportStorageClientMock: ReturnType<typeof vi.fn>
 let getBreadcrumbSnapshotMock: ReturnType<typeof vi.fn>
-let generateAttachmentUrlSpy: ReturnType<typeof vi.fn>
+let generateAttachmentUrlSpy: ReturnType<typeof vi.fn<(...args: any[]) => any>>
 
 // Mock sonner toast
 vi.mock('sonner', () => ({

apps/studio/lib/ai/tools/incident-tools.test.ts

@@ -14,7 +14,7 @@ describe('ai/tools/incident-tools', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockFetch = vi.fn()
-    global.fetch = mockFetch
+    global.fetch = mockFetch as typeof fetch
 
     // Mock AbortSignal.timeout
     mockAbortSignal = new AbortController().signal

apps/studio/lib/api/self-hosted/functions/index.test.ts

@@ -62,9 +62,9 @@ describe('api/self-hosted/functions/index', () => {
         getFunctionBySlug: vi.fn(),
         getFileEntriesBySlug: vi.fn(),
       }
-      vi.mocked(fileSystemStore.FileSystemFunctionsArtifactStore).mockReturnValue(
-        mockInstance as any
-      )
+      vi.mocked(fileSystemStore.FileSystemFunctionsArtifactStore).mockImplementation(function () {
+        return mockInstance as any
+      })
       process.env.EDGE_FUNCTIONS_MANAGEMENT_FOLDER = '/tmp/test'
 
       const result = getFunctionsArtifactStore()

apps/studio/lib/api/snippets.utils.test.ts

@@ -16,8 +16,20 @@ import {
   type Snippet,
 } from './snippets.utils'
 
-// Mock fs/promises
-vi.mock('fs/promises')
+// Mock fs/promises — explicit factory required since Vitest 4 automocking
+// doesn't create mock functions for getter-based exports on Node built-ins.
+vi.mock('fs/promises', () => ({
+  default: {
+    access: vi.fn(),
+    mkdir: vi.fn(),
+    readdir: vi.fn(),
+    readFile: vi.fn(),
+    writeFile: vi.fn(),
+    unlink: vi.fn(),
+    rm: vi.fn(),
+    stat: vi.fn(),
+  },
+}))
 const mockedFS = vi.mocked(fs)
 
 // Mock SNIPPETS_DIR from constants

apps/studio/package.json

@@ -74,7 +74,6 @@
     "@types/d3-geo": "^3.1.0",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/functions": "^2.1.0",
-    "@vitejs/plugin-react": "^4.3.4",
     "@xyflow/react": "^12.10.1",
     "@zip.js/zip.js": "^2.7.29",
     "ai": "^6.0.116",
@@ -179,8 +178,9 @@
     "@types/uuid": "^8.3.4",
     "@types/zxcvbn": "^4.4.1",
     "@typescript-eslint/utils": "8.48.0",
-    "@vitest/coverage-v8": "^3.2.0",
-    "@vitest/ui": "^3.2.0",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/ui": "catalog:",
     "api-types": "workspace:*",
     "autoevals": "^0.0.132",
     "braintrust": "^3.4.0",
@@ -205,7 +205,7 @@
     "tsx": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "catalog:",
     "vitest": "catalog:"
   }
 }

apps/studio/tests/pages/api/mcp/index.test.ts

@@ -14,9 +14,9 @@ import { mswServer } from '@/tests/lib/msw'
 // testing the MCP transport implementation, we mock both packages to avoid hitting the
 // incompatible Hono code paths.
 vi.mock('@modelcontextprotocol/sdk/server/streamableHttp.js', () => ({
-  StreamableHTTPServerTransport: vi.fn().mockImplementation(() => ({
-    handleRequest: vi.fn().mockResolvedValue(undefined),
-  })),
+  StreamableHTTPServerTransport: vi.fn().mockImplementation(function () {
+    return { handleRequest: vi.fn().mockResolvedValue(undefined) }
+  }),
 }))
 
 vi.mock('@supabase/mcp-server-supabase', () => ({

apps/www/package.json

@@ -116,7 +116,7 @@
     "tsconfig": "workspace:*",
     "unist-util-visit-parents": "5.1.3",
     "uuid": "^9.0.1",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "catalog:",
     "vitest": "catalog:",
     "zod": "catalog:"
   },

blocks/vue/package.json

@@ -25,6 +25,6 @@
   "devDependencies": {
     "shadcn": "^3.3.1",
     "tsconfig": "workspace:*",
-    "vite": "catalog:"
+    "vite": "^7.3.2"
   }
 }

packages/common/package.json

@@ -30,8 +30,8 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@vitest/coverage-v8": "^3.2.0",
-    "@vitest/ui": "^3.2.0",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/ui": "catalog:",
     "tsconfig": "workspace:*",
     "typescript": "catalog:",
     "vitest": "catalog:"

packages/pg-meta/package.json

@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@types/pg": "^8.11.11",
-    "@vitest/coverage-v8": "^3.2.0",
+    "@vitest/coverage-v8": "catalog:",
     "npm-run-all": "^4.1.5",
     "pg": "^8.13.1",
     "postgres-array": "^3.0.2",

packages/ui-patterns/package.json

@@ -788,7 +788,6 @@
     "@tanstack/react-table": "^8.21.3",
     "@supabase/sql-to-rest": "^0.1.6",
     "@supabase/supabase-js": "catalog:",
-    "@vitest/coverage-v8": "^3.2.0",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "cmdk": "^1.1.1",
@@ -844,6 +843,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitest/coverage-v8": "catalog:",
     "api-types": "workspace:*",
     "next-router-mock": "^0.9.13",
     "tsx": "catalog:",

packages/ui-patterns/vitest.setup.ts

@@ -19,11 +19,13 @@ Object.defineProperty(window, 'matchMedia', {
 })
 
 // Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
+global.ResizeObserver = vi.fn().mockImplementation(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }
+})
 
 // Mock scrollIntoView
 Element.prototype.scrollIntoView = vi.fn()

packages/ui/package.json

@@ -81,7 +81,7 @@
     "@types/react": "catalog:",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "catalog:",
-    "@vitest/coverage-v8": "^3.2.0",
+    "@vitest/coverage-v8": "catalog:",
     "config": "workspace:*",
     "glob": "^8.1.0",
     "style-dictionary": "^3.7.1",

pnpm-workspace.yaml

@@ -24,8 +24,12 @@ catalog:
   tsx: 4.20.3
   typescript: ~6.0.0
   valtio: ^1.12.0
-  vite: ^7.3.2
-  vitest: ^3.2.0
+  '@vitejs/plugin-react': ^6.0.1
+  '@vitest/coverage-v8': ^4.1.4
+  '@vitest/ui': ^4.1.4
+  vite: ^8.0.8
+  vite-tsconfig-paths: ^6.1.1
+  vitest: ^4.1.4
   zod: 3.25.76
 
 ignoredBuiltDependencies: