Bump Vitest to v4 to unblock @storybook/addon-vitest (#4260)

## Background

#4257 is adding a Storybook a11y CI gate to `@graphiql/react`, currently
via `@storybook/test-runner` + `axe-playwright`. The paved path
Storybook recommends is `@storybook/addon-vitest`, which folds stories
into the existing Vitest suite and avoids a separate workflow file,
test-runner config, and JSON baseline. That addon requires Vitest ≥ 3;
we're on `^2.1.9` workspace-wide, so this upgrade is a prerequisite for
taking the cleaner approach in #4257 rather than landing cruft we'd
immediately want to rip out.

## What this enables

Switching #4257 to:

- `@storybook/addon-vitest` + `@storybook/addon-a11y`
- Browser-mode Vitest project for stories (Playwright Chromium, like the
test-runner uses today)
- Per-story `parameters.a11y.test: 'error' | 'todo' | 'off'` — no JSON
baseline file
- No new workflow, no `.storybook/test-runner.ts`, no
`a11y-baseline.json`, no `@storybook/test-runner` / `axe-playwright`
devDeps

## Changes

Workspace-wide bump to Vitest v4 and its companion peer-deps. A few
mocks needed light fixups for v4's stricter `new` semantics.

Author: trevor-scheer

package.json

@@ -113,7 +113,7 @@
     "turbo": "^2.5.2",
     "typedoc": "^0.28.19",
     "typescript": "^5.8.0",
-    "vitest": "^2.1.9",
+    "vitest": "^4.1.6",
     "wgutils": "^1.2.5",
     "wsrun": "^5.2.4"
   },

packages/graphiql-plugin-doc-explorer/__mocks__/zustand.mts

@@ -0,0 +1 @@
+../../graphiql/__mocks__/zustand.mts

packages/graphiql-plugin-doc-explorer/__mocks__/zustand.ts

@@ -0,0 +1 @@
+../../graphiql/__mocks__/zustand.mts

packages/graphiql-plugin-history/__mocks__/zustand.mts

@@ -16,5 +16,15 @@ export default defineConfig({
         ),
       },
     ],
+    // `GraphiQLProvider` kicks off Monaco dynamic imports that may settle
+    // after these quick tests tear down; ignore those teardown errors.
+    onUnhandledError(error) {
+      if (
+        error.name === 'EnvironmentTeardownError' &&
+        /monaco-editor|monaco-graphql/.test(error.message)
+      ) {
+        return false;
+      }
+    },
   },
 });

packages/graphiql-plugin-history/__mocks__/zustand.ts

@@ -25,12 +25,14 @@ if (!navigator.clipboard) {
  */
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 if (!window.ResizeObserver) {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
   Object.defineProperty(window, 'ResizeObserver', {
     writable: false,
-    value: vi.fn().mockReturnValue({
-      observe() {},
-      disconnect() {},
-    }),
+    value: ResizeObserverMock,
   });
 }
 

packages/graphiql-plugin-history/vitest.config.mts

@@ -5,23 +5,24 @@
  * @see https://zustand.docs.pmnd.rs/guides/testing#vitest
  */
 
-import { afterEach } from 'vitest';
+import { afterEach, vi } from 'vitest';
 import { act } from '@testing-library/react';
-import {
-  create as originalCreate,
-  createStore as originalCreateStore,
-  useStore,
-  StateCreator,
-} from 'zustand';
+import type { StateCreator } from 'zustand';
+import type * as ZustandExports from 'zustand';
 
-// Originally zustand docs suggest to use `export * from 'zustand'`, but I had issues with it.
-// It conflicts with locale export of `create` and `createStore` functions
-export { useStore };
+// A static `import ... from 'zustand'` resolves back to this mock and recurses.
+const {
+  create: originalCreate,
+  createStore: originalCreateStore,
+  useStore: originalUseStore,
+} = await vi.importActual<typeof ZustandExports>('zustand');
+
+export const useStore = originalUseStore;
 
 // a variable to hold reset functions for all stores declared in the app
 export const storeResetFns = new Set<() => void>();
 
-const createUncurried = <T>(stateCreator: StateCreator<T>) => {
+const createUncurried = <T,>(stateCreator: StateCreator<T>) => {
   const store = originalCreate(stateCreator);
   const initialState = store.getInitialState();
   storeResetFns.add(() => {
@@ -31,7 +32,7 @@ const createUncurried = <T>(stateCreator: StateCreator<T>) => {
 };
 
 // when creating a store, we get its initial state, create a reset function and add it in the set
-export const create = (<T>(stateCreator: StateCreator<T>) => {
+export const create = (<T,>(stateCreator: StateCreator<T>) => {
   console.log('zustand create mock');
 
   // to support a curried version of create
@@ -51,7 +52,7 @@ function createStoreUncurried<T>(stateCreator: StateCreator<T>) {
 }
 
 // When creating a store, we get its initial state, create a reset function and add it in the set
-export const createStore = (<T>(stateCreator: StateCreator<T>) => {
+export const createStore = (<T,>(stateCreator: StateCreator<T>) => {
   console.log('zustand createStore mock');
 
   // to support a curried version of createStore

packages/graphiql/__mocks__/monaco-editor.ts

@@ -66,7 +66,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/web-worker": "3.1.4",
+    "@vitest/web-worker": "^4.1.6",
     "babel-plugin-react-compiler": "19.1.0-rc.1",
     "cross-env": "^7.0.2",
     "cypress": "^13.13.2",
@@ -78,7 +78,7 @@
     "typescript": "^5.8.0",
     "vite": "^6.3.4",
     "vite-plugin-dts": "^4.5.3",
-    "vitest-canvas-mock": "0.3.3"
+    "vitest-canvas-mock": "^1.1.4"
   },
   "browser": {
     "//": "esm.sh polyfills `process`, we don't need it",

packages/graphiql/__mocks__/zustand.ts packages/graphiql/__mocks__/zustand.mtspackages/graphiql/__mocks__/zustand.ts renamed to packages/graphiql/__mocks__/zustand.mts

@@ -421,7 +421,8 @@ describe('GraphiQL', () => {
 
     const callback = async () => {
       try {
-        await findByText('Persist headers');
+        // Expecting non-existence; short-circuit instead of waiting the default.
+        await findByText('Persist headers', undefined, { timeout: 1000 });
       } catch {
         // eslint-disable-next-line no-throw-literal
         throw 'failed';