feat(FR-2748): fully migrate test files from jest.* to vi.* and align TS globals

packages/backend.ai-ui/setupTests.ts

@@ -53,13 +53,24 @@ if (typeof MutationObserver !== 'undefined' && typeof document !== 'undefined')
   });
 }
 
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// jest-dom adds custom matchers for asserting on DOM nodes.
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import './src/__test__/matchMedia.mock.cjs';
 import '@testing-library/jest-dom';
 
+// Expose `vi` under the global name `jest` so `@testing-library/dom`'s
+// `waitFor` detects "Jest fake timers are active" and switches to its
+// timer-aware polling path. Without this, tests that combine
+// `vi.useFakeTimers()` with `await waitFor(...)` hang — waitFor's default
+// polling uses `setTimeout`, which never fires under faked timers.
+// (None of our test code references `jest.*` directly anymore; this is
+// purely a `@testing-library/dom` integration hook.)
+import { vi } from 'vitest';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).jest = vi;
+
 // Mock ResizeObserver for Ant Design v6 components
 global.ResizeObserver = class ResizeObserver {
   observe() {}

packages/backend.ai-ui/src/__test__/matchMedia.mock.cjs

@@ -2,7 +2,7 @@
  * matchMedia mock for Jest testing environment
  * 
  * This mock is loaded before tests run to provide a basic matchMedia implementation
- * for components that use media queries. It avoids direct jest.fn() calls at module
+ * for components that use media queries. It avoids direct vi.fn() calls at module
  * load time to work properly with ES modules.
  */
 

packages/backend.ai-ui/src/__test__/matchMedia.mock.js

@@ -1,13 +1,14 @@
+/* global vi */
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query) => ({
+  value: vi.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
   })),
 });

packages/backend.ai-ui/src/components/BAIBulkEditFormItem.test.tsx

@@ -340,7 +340,7 @@ describe('BAIBulkEditFormItem', () => {
     });
 
     it('should allow user selection in edit mode', async () => {
-      const onValuesChange = jest.fn();
+      const onValuesChange = vi.fn();
       const user = setupUser();
       render(
         <FormWrapper onValuesChange={onValuesChange}>

packages/backend.ai-ui/src/components/BAIButton.test.tsx

@@ -31,7 +31,7 @@ describe('BAIButton', () => {
 
   describe('onClick Handler', () => {
     it('should call onClick handler when clicked', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(<BAIButton onClick={onClick}>Click</BAIButton>);
 
@@ -40,7 +40,7 @@ describe('BAIButton', () => {
     });
 
     it('should not call onClick if disabled', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(
         <BAIButton onClick={onClick} disabled>
@@ -55,7 +55,7 @@ describe('BAIButton', () => {
 
   describe('Async Action Handling', () => {
     it('should execute async action when provided', async () => {
-      const action = jest.fn().mockResolvedValue(undefined);
+      const action = vi.fn().mockResolvedValue(undefined);
       const user = userEvent.setup();
       render(<BAIButton action={action}>Execute Action</BAIButton>);
 
@@ -67,7 +67,7 @@ describe('BAIButton', () => {
     });
 
     it('should show loading state during async action', async () => {
-      const action = jest
+      const action = vi
         .fn()
         .mockImplementation(
           () => new Promise((resolve) => setTimeout(resolve, 100)),
@@ -87,7 +87,7 @@ describe('BAIButton', () => {
     });
 
     it('should clear loading state after action completes', async () => {
-      const action = jest.fn().mockResolvedValue(undefined);
+      const action = vi.fn().mockResolvedValue(undefined);
       const user = userEvent.setup();
       render(<BAIButton action={action}>Complete Action</BAIButton>);
 
@@ -110,8 +110,8 @@ describe('BAIButton', () => {
     });
 
     it('should call both action and onClick when both are provided', async () => {
-      const action = jest.fn().mockResolvedValue(undefined);
-      const onClick = jest.fn();
+      const action = vi.fn().mockResolvedValue(undefined);
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(
         <BAIButton action={action} onClick={onClick}>
@@ -128,7 +128,7 @@ describe('BAIButton', () => {
     });
 
     it('should handle async action with successful resolution', async () => {
-      const action = jest.fn().mockResolvedValue('success');
+      const action = vi.fn().mockResolvedValue('success');
       const user = userEvent.setup();
       render(<BAIButton action={action}>Async Success</BAIButton>);
 
@@ -160,7 +160,7 @@ describe('BAIButton', () => {
     });
 
     it('should combine loading prop with action loading state', async () => {
-      const action = jest
+      const action = vi
         .fn()
         .mockImplementation(
           () => new Promise((resolve) => setTimeout(resolve, 50)),
@@ -217,7 +217,7 @@ describe('BAIButton', () => {
 
   describe('Event Object Handling', () => {
     it('should pass click event to onClick handler', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(<BAIButton onClick={onClick}>Click</BAIButton>);
 
@@ -231,8 +231,8 @@ describe('BAIButton', () => {
     });
 
     it('should call onClick even when action is provided', async () => {
-      const action = jest.fn().mockResolvedValue(undefined);
-      const onClick = jest.fn();
+      const action = vi.fn().mockResolvedValue(undefined);
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(
         <BAIButton action={action} onClick={onClick}>
@@ -254,7 +254,7 @@ describe('BAIButton', () => {
 
   describe('Edge Cases', () => {
     it('should handle undefined action gracefully', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(
         <BAIButton action={undefined} onClick={onClick}>
@@ -277,7 +277,7 @@ describe('BAIButton', () => {
     });
 
     it('should handle rapid clicks during async action', async () => {
-      const action = jest
+      const action = vi
         .fn()
         .mockImplementation(
           () => new Promise((resolve) => setTimeout(resolve, 100)),
@@ -301,7 +301,7 @@ describe('BAIButton', () => {
 
   describe('Accessibility', () => {
     it('should be keyboard accessible', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(<BAIButton onClick={onClick}>Accessible</BAIButton>);
 

packages/backend.ai-ui/src/components/BAICard.test.tsx

@@ -82,7 +82,7 @@ describe('BAICard', () => {
 
     it('should call onClickExtraButton when extra button is clicked', async () => {
       const user = userEvent.setup();
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(
         <BAICard
           title="Card"
@@ -263,7 +263,7 @@ describe('BAICard', () => {
 
     it('should call onTabChange when tab is clicked', async () => {
       const user = userEvent.setup();
-      const handleTabChange = jest.fn();
+      const handleTabChange = vi.fn();
       render(
         <BAICard
           title="Card with Tabs"
@@ -364,7 +364,7 @@ describe('BAICard', () => {
 
   describe('Complex Scenarios', () => {
     it('should render card with multiple features combined', () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(
         <BAICard
           title="Complex Card"
@@ -385,8 +385,8 @@ describe('BAICard', () => {
 
     it('should render card with tabs and extra button', async () => {
       const user = userEvent.setup();
-      const handleButtonClick = jest.fn();
-      const handleTabChange = jest.fn();
+      const handleButtonClick = vi.fn();
+      const handleTabChange = vi.fn();
 
       render(
         <BAICard

packages/backend.ai-ui/src/components/BAIFlex.test.tsx

@@ -1,5 +1,4 @@
 import BAIFlex from './BAIFlex';
-import { describe, test } from '@jest/globals';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 

packages/backend.ai-ui/src/components/BAILink.test.tsx

@@ -115,7 +115,7 @@ describe('BAILink', () => {
 
   describe('onClick Handler', () => {
     it('should call onClick handler when clicked on react-router Link', async () => {
-      const onClick = jest.fn((e) => e.preventDefault());
+      const onClick = vi.fn((e) => e.preventDefault());
       const user = userEvent.setup();
       renderWithRouter(
         <BAILink to="/test" onClick={onClick}>
@@ -128,7 +128,7 @@ describe('BAILink', () => {
     });
 
     it('should call onClick handler when clicked on Typography.Link', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(<BAILink onClick={onClick}>Clickable Typography Link</BAILink>);
 
@@ -137,7 +137,7 @@ describe('BAILink', () => {
     });
 
     it('should block click interaction when link is disabled', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(
         <BAILink type="disabled" onClick={onClick}>
@@ -219,7 +219,7 @@ describe('BAILink', () => {
 
   describe('Accessibility', () => {
     it('should be keyboard accessible for react-router Link', async () => {
-      const onClick = jest.fn((e) => e.preventDefault());
+      const onClick = vi.fn((e) => e.preventDefault());
       const user = userEvent.setup();
       renderWithRouter(
         <BAILink to="/test" onClick={onClick}>
@@ -235,7 +235,7 @@ describe('BAILink', () => {
     });
 
     it('should call onClick for Typography.Link on click', async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const user = userEvent.setup();
       render(<BAILink onClick={onClick}>Typography Click</BAILink>);