feat(FR-2609): Vitest migration for react/ (100% pass, 856/856 tests)

[nowgnuesLee]

Resolves #6812(FR-2609)

Summary

Migrates react/'s test suite from Jest to Vitest. 856/856 tests passing under Vitest.

(Commit title still reads 96.9% pass rate, 822/848 tests — that was the baseline before the last-mile fixes landed in-tree via gt modify. Current state is 100%; see test-plan counts below.)

New files

• react/vitest.config.ts — reuses @vitejs/plugin-react + babel-plugin-react-compiler + babel-plugin-relay so tests and the running app exercise identical transformed code.
• react/__test__/vitest.jest-compat.ts — exposes vi as jest globally, so existing jest.fn() / jest.spyOn() calls in test files continue to work without a sweeping rename.

Vitest 4 pitfalls fixed inline

• process.env.NODE_ENV is non-configurable in Node 20+. Replaced Object.defineProperty(process.env, 'NODE_ENV', ...) with vi.stubEnv('NODE_ENV', ...) + vi.unstubAllEnvs() in customThemeConfig.test.ts.
• Default-export mock shape: vi.mock(path, () => Component) must return { default: Component } for files imported via import X from .... Fixed in MyResourceWithinResourceGroup.test.tsx.
• Arrow-function mockImplementation called with new: new TabCount() throws because arrow functions aren't constructors. Swapped all MockedTabCount.mockImplementation(() => ({...})) to function(this: any) {...} in useLoginOrchestration.test.ts.
• Factory-created vi.fn() mock history isn't cleared by vi.restoreAllMocks() (that only touches spyOn spies). Added vi.clearAllMocks() in afterEach to prevent call-count leakage across tests.

Test plan

• pnpm --prefix ./react run vitest → 856/856 pass
• Same React Compiler / Relay transforms as prod build ('use memo' optimisations active in tests)
• scripts/verify.sh passes for Lint + Format + Relay checks

Stack

Builds on FR-2608. The broader Jest → Vitest cutover continues in the next PR (BUI + root /src).

[nowgnuesLee]

• fix(FR-2529): include backend.ai-client src in craco TS loader and tsconfig paths #6615
• refactor(FR-2529): extract backend.ai-client as standalone workspace package #6614
• fix(FR-2607): align Electron publicPath patch with Vite output #7189
• fix(FR-2606): clear residual build-time warnings (BUI dts + module directive) #7113
• fix(FR-2606): restore Monaco self-hosting in Vite dev server #7104
• feat(FR-2748): fully migrate test files from jest.* to vi.* and align TS globals #7083
• feat(FR-2746): re-enable 5 tests skipped during Vitest migration #7071
• feat(FR-2744): restore Vitest coverage reporting in CI #7065
• fix(FR-2606): replace webpackIgnore with @vite-ignore in dynamic plugin imports #6879
• fix(FR-2606): replace global.packageVersion with globalThis.packageVersion in WebUISider #6878
• fix(FR-2608): disable vite-plugin-pwa auto-manifest to preserve existing manifest.json #6877
• feat(FR-2611): retire Craco/Webpack — build, Makefile, CI all on Vite/Vitest #6876
• feat: migrate BUI + root tests from Jest to Vitest (follow-up to FR-2609) #6875
• feat(FR-2609): Vitest migration for react/ (100% pass, 856/856 tests) #6874 👈 (View in Graphite)
• feat(FR-2608): Vite production build with vite-plugin-pwa service worker #6873
• feat(FR-2610): Vite dev-reload plugin for i18n / theme / config.toml file changes #6872
• feat(FR-2607): Vite spike answer — es6:// Electron publicPath works via renderBuiltUrl #6871
• feat(FR-2606): restore BUI i18n context isolation under Vite dep optimization #6870
• feat(FR-2606): Vite PoC phase 1 — dev server + HMR + React Compiler parity #6869
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./react

Action wasn't able to generate report within GitHub comment limit. If you're facing this issue, please let me know by commenting under this issue.

Report generated by 🧪jest coverage report action from 40cf0a8

[Copilot]

Pull request overview

Migrates the react/ workspace test runner from Jest to Vitest while keeping the existing test suite largely intact, including React Compiler + Relay Babel transforms to match the app’s runtime pipeline.

Changes:

• Added a dedicated react/vitest.config.ts and a Jest-compat shim to reduce churn during the migration.
• Updated numerous React workspace tests to use vi.* APIs and Vitest semantics (timers, mocks, env stubbing).
• Updated React workspace dependencies/lockfile to include Vitest + jsdom and recorded migration notes.

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
react/vitest.config.ts	Adds Vitest config, Vite/React transform pipeline, and module aliasing/mocking.
react/test/vitest.jest-compat.ts	Adds runtime shim exposing vi as jest for legacy call sites.
react/package.json	Adds vitest scripts and dependencies (vitest, jsdom).
react/VITE_POC_NOTES.md	Documents Vitest migration status/approach in the Vite PoC notes.
react/src/lib/TabCounter.test.ts	Migrates timer/mocking APIs from Jest to Vitest.
react/src/hooks/useWebUIConfig.test.ts	Migrates fetch mocking + mock restoration to Vitest APIs.
react/src/hooks/useVariantConfigs.test.ts	Migrates react-i18next mock usage + mock typing to Vitest.
react/src/hooks/useValidateSessionName.test.tsx	Migrates module mocking to vi.mock.
react/src/hooks/useValidateServiceName.test.tsx	Migrates module mocking to vi.mock.
react/src/hooks/useTokenizer.test.ts	Migrates tokenizer mocking/casts to Vitest mock types.
react/src/hooks/useScrollBreackPoint.test.tsx	Migrates spies/mocks cleanup to Vitest APIs.
react/src/hooks/usePrimaryColors.test.tsx	Migrates @ant-design/colors mock to Vitest.
react/src/hooks/useMemoWithPrevious.test.tsx	Migrates factory spies to vi.fn.
react/src/hooks/useLogout.test.ts	Migrates i18n mocking + spies to Vitest.
react/src/hooks/useLoginOrchestration.test.ts	Updates mocks for Vitest hoisting/default-export shape and constructor semantics.
react/src/hooks/useKeyboardShortcut.test.ts	Migrates ahooks mock + types to Vitest.
react/src/hooks/useHighlight.test.tsx	Migrates multiple module mocks and mock typing to Vitest.
react/src/hooks/useControllableState.test.ts	Migrates callback mock creation to vi.fn.
react/src/hooks/useBackendAIImageMetaData.test.tsx	Migrates fetch mock to vi.fn.
react/src/hooks/tests/useMultiStepNotification.test.tsx	Migrates helper/hook mocks and executor mocks to Vitest.
react/src/helper/resultTypes.test.ts	Removes @jest/globals import for Vitest globals.
react/src/helper/index.test.tsx	Migrates helper tests’ client method mocks to Vitest.
react/src/helper/customThemeConfig.test.ts	Migrates env stubbing to vi.stubEnv/vi.unstubAllEnvs and other mocks to Vitest.
react/src/helper/big-number.test.ts	Removes @jest/globals import for Vitest globals.
react/src/global-stores.test.ts	Migrates fetch mocks and fake timers to Vitest.
react/src/diagnostics/rules/tests/storageProxyRules.test.ts	Removes @jest/globals import for Vitest globals.
react/src/diagnostics/rules/tests/endpointRules.test.ts	Removes @jest/globals import for Vitest globals.
react/src/diagnostics/rules/tests/cspRules.test.ts	Removes @jest/globals import for Vitest globals.
react/src/diagnostics/rules/tests/configRules.test.ts	Removes @jest/globals import for Vitest globals.
react/src/components/MyResourceWithinResourceGroup.test.tsx	Fixes Vitest default-export mock shape and migrates mocks to vi.*.
pnpm-lock.yaml	Adds Vitest/jsdom dependency graph updates.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

react/package.json:98

• PR description indicates react/ tests are migrated to Vitest, but scripts.test still runs Jest. This means pnpm --prefix ./react test (and any tooling/CI that calls it) won’t validate the Vitest suite. Consider making test run Vitest (and optionally add test:jest for the legacy runner) or clearly documenting which script is canonical during the transition.

    "vite:build": "vite build",
    "vitest": "vitest run",
    "vitest:watch": "vitest",
    "build": "pnpm run build:only && cp -r ./build/* ../build/web/",
    "build:only": "NODE_OPTIONS='--max-old-space-size=4096' pnpm run relay && NODE_OPTIONS='--max-old-space-size=4096' craco build",
    "test": "NODE_OPTIONS='$NODE_OPTIONS --no-deprecation --experimental-vm-modules' jest",
    "eject": "react-scripts eject",

[graphite-app]

Merge activity

• Apr 30, 12:11 PM UTC: yomybaby added this pull request to the Graphite merge queue.
• Apr 30, 12:29 PM UTC: Merged by the Graphite merge queue.