chore: Migrate to Vitest 4 (#2330)

Author: iwoplaza

apps/treeshake-test/package.json

@@ -13,7 +13,7 @@
     "unplugin-typegpu": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.0.0",
+    "@types/node": "catalog:types",
     "arktype": "1.0.29-alpha",
     "esbuild": "^0.25.10",
     "ts-loader": "^9.5.4",

apps/typegpu-docs/package.json

@@ -73,9 +73,10 @@
     "@types/babel__standalone": "^7.1.9",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.7",
-    "@types/node": "^24.7.0",
+    "@types/node": "catalog:types",
     "@types/three": "catalog:types",
     "@vitejs/plugin-basic-ssl": "^2.1.0",
+    "@vitest/browser-preview": "^4.1.2",
     "@webgpu/types": "catalog:types",
     "astro-vtbot": "^2.1.10",
     "autoprefixer": "^10.4.21",

apps/typegpu-docs/tests/individual-example-tests/utils/commonMocks.ts

@@ -75,11 +75,13 @@ export function mockFonts() {
 export function mockResizeObserver() {
   vi.stubGlobal(
     'ResizeObserver',
-    vi.fn(() => ({
-      observe: vi.fn(),
-      unobserve: vi.fn(),
-      disconnect: vi.fn(),
-    })),
+    vi.fn(function () {
+      return {
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      };
+    }),
   );
 }
 
@@ -158,12 +160,14 @@ const mockAudioBufferSourceNode = {
 export function mockAudioLoading() {
   vi.stubGlobal(
     'AudioContext',
-    vi.fn(() => ({
-      createGain: vi.fn(() => mockGainNode),
-      destination: {},
-      createBufferSource: vi.fn(() => mockAudioBufferSourceNode),
-      decodeAudioData: vi.fn(async () => null),
-    })),
+    vi.fn(function () {
+      return {
+        createGain: vi.fn(() => mockGainNode),
+        destination: {},
+        createBufferSource: vi.fn(() => mockAudioBufferSourceNode),
+        decodeAudioData: vi.fn(async () => null),
+      };
+    }),
   );
 
   if (fetchMockMap.has(audioRegExp)) return;

apps/typegpu-docs/tests/individual-example-tests/utils/testUtils.ts

@@ -6,8 +6,8 @@ export function getExampleURLs(
   ts: string;
 } {
   return {
-    html: `../../../../../apps/typegpu-docs/src/examples/${category}/${name}/index.html?raw`,
-    ts: `../../../../../apps/typegpu-docs/src/examples/${category}/${name}/index.ts`,
+    html: `../../../src/examples/${category}/${name}/index.html?raw`,
+    ts: `../../../src/examples/${category}/${name}/index.ts`,
   };
 }
 

apps/typegpu-docs/vitest.config.mts

@@ -2,6 +2,7 @@ import { createJiti } from 'jiti';
 import type TypeGPUPlugin from 'unplugin-typegpu/vite';
 import { imagetools } from 'vite-imagetools';
 import { defineConfig, type Plugin } from 'vitest/config';
+import { preview } from '@vitest/browser-preview';
 
 const jiti = createJiti(import.meta.url);
 const typegpu = await jiti.import<typeof TypeGPUPlugin>('unplugin-typegpu/vite', { default: true });
@@ -25,7 +26,7 @@ export default defineConfig({
           name: 'browser',
           include: ['**/*.{test,spec}.browser.ts'],
           browser: {
-            provider: 'preview',
+            provider: preview(),
             instances: [{ browser: 'chromium' }],
           },
         },

package.json

@@ -70,6 +70,7 @@
       "rollup": "catalog:build",
       "vite": "8.0.2",
       "@babel/types": "catalog:",
+      "@types/node": "catalog:types",
       "typescript": "catalog:types",
       "three": "catalog:example",
       "@typescript-eslint/utils": "^8.57.2"

packages/eslint-plugin/package.json

@@ -50,7 +50,7 @@
     "@typescript-eslint/utils": "^8.57.2"
   },
   "devDependencies": {
-    "@types/node": "^25.0.10",
+    "@types/node": "catalog:types",
     "@typescript-eslint/rule-tester": "^8.57.2",
     "eslint": "^9.39.2",
     "eslint-doc-generator": "^3.3.2",

packages/typegpu-gl/package.json

@@ -26,7 +26,7 @@
   },
   "scripts": {
     "build": "tsdown",
-    "test:types": "pnpm tsc --p ./tsconfig.json --noEmit",
+    "test:types": "pnpm tsc --p ./tsconfig.json --noEmit && pnpm tsc --p ./tsconfig.test.json --noEmit",
     "prepublishOnly": "tgpu-dev-cli prepack"
   },
   "devDependencies": {
@@ -35,6 +35,7 @@
     "tinyest": "workspace:^0.3.0",
     "tsdown": "catalog:build",
     "typegpu": "workspace:*",
+    "typegpu-testing-utility": "workspace:*",
     "typescript": "catalog:types",
     "unbuild": "catalog:build",
     "unplugin-typegpu": "workspace:*"

packages/typegpu-gl/tests/utils/extendedTest.ts

@@ -1,6 +1,6 @@
-import { it as base, vi } from 'vitest';
+import { test as base, vi } from 'vitest';
 // oxlint-disable-next-line import/no-unassigned-import -- imported for side effects
-import './webgpuGlobals.ts';
+import 'typegpu-testing-utility';
 
 function createMockOffscreenCanvas(width = 256, height = 256) {
   const canvas = {