refactor(web): migrate to Vitest and esm (#29974)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/context/modal-context.test.tsx

@@ -4,30 +4,30 @@ import { ModalContextProvider } from '@/context/modal-context'
 import { Plan } from '@/app/components/billing/type'
 import { defaultPlan } from '@/app/components/billing/config'
 
-jest.mock('@/config', () => {
-  const actual = jest.requireActual('@/config')
+vi.mock('@/config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config')>()
   return {
     ...actual,
     IS_CLOUD_EDITION: true,
   }
 })
 
-jest.mock('next/navigation', () => ({
-  useSearchParams: jest.fn(() => new URLSearchParams()),
+vi.mock('next/navigation', () => ({
+  useSearchParams: vi.fn(() => new URLSearchParams()),
 }))
 
-const mockUseProviderContext = jest.fn()
-jest.mock('@/context/provider-context', () => ({
+const mockUseProviderContext = vi.fn()
+vi.mock('@/context/provider-context', () => ({
   useProviderContext: () => mockUseProviderContext(),
 }))
 
-const mockUseAppContext = jest.fn()
-jest.mock('@/context/app-context', () => ({
+const mockUseAppContext = vi.fn()
+vi.mock('@/context/app-context', () => ({
   useAppContext: () => mockUseAppContext(),
 }))
 
 let latestTriggerEventsModalProps: any = null
-const triggerEventsLimitModalMock = jest.fn((props: any) => {
+const triggerEventsLimitModalMock = vi.fn((props: any) => {
   latestTriggerEventsModalProps = props
   return (
     <div data-testid="trigger-limit-modal">
@@ -37,7 +37,7 @@ const triggerEventsLimitModalMock = jest.fn((props: any) => {
   )
 })
 
-jest.mock('@/app/components/billing/trigger-events-limit-modal', () => ({
+vi.mock('@/app/components/billing/trigger-events-limit-modal', () => ({
   __esModule: true,
   default: (props: any) => triggerEventsLimitModalMock(props),
 }))
@@ -92,7 +92,7 @@ describe('ModalContextProvider trigger events limit modal', () => {
   })
 
   afterEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
   })
 
   it('opens the trigger events limit modal and persists dismissal in localStorage', async () => {
@@ -106,7 +106,9 @@ describe('ModalContextProvider trigger events limit modal', () => {
       plan,
       isFetchedPlan: true,
     })
-    const setItemSpy = jest.spyOn(Storage.prototype, 'setItem')
+    // Note: vitest.setup.ts replaces localStorage with a mock object that has vi.fn() methods
+    // We need to spy on the mock's setItem, not Storage.prototype.setItem
+    const setItemSpy = vi.spyOn(localStorage, 'setItem')
 
     renderProvider()
 
@@ -122,6 +124,9 @@ describe('ModalContextProvider trigger events limit modal', () => {
     })
 
     await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument())
+    await waitFor(() => {
+      expect(setItemSpy.mock.calls.length).toBeGreaterThan(0)
+    })
     const [key, value] = setItemSpy.mock.calls[0]
     expect(key).toContain('trigger-events-limit-dismissed-workspace-1-professional-3000-')
     expect(value).toBe('1')
@@ -138,10 +143,10 @@ describe('ModalContextProvider trigger events limit modal', () => {
       plan,
       isFetchedPlan: true,
     })
-    jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+    vi.spyOn(localStorage, 'getItem').mockImplementation(() => {
       throw new Error('Storage disabled')
     })
-    const setItemSpy = jest.spyOn(Storage.prototype, 'setItem')
+    const setItemSpy = vi.spyOn(localStorage, 'setItem')
 
     renderProvider()
 
@@ -167,7 +172,7 @@ describe('ModalContextProvider trigger events limit modal', () => {
       plan,
       isFetchedPlan: true,
     })
-    jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+    vi.spyOn(localStorage, 'setItem').mockImplementation(() => {
       throw new Error('Quota exceeded')
     })
 

web/context/provider-context-mock.spec.tsx

@@ -30,7 +30,7 @@ const reset = {
   triggerEvents: 100,
 }
 
-jest.mock('@/context/provider-context', () => ({
+vi.mock('@/context/provider-context', () => ({
   useProviderContext: () => {
     const withPlan = createMockPlan(mockPlan)
     const withUsage = createMockPlanUsage(usage, withPlan)
@@ -48,7 +48,7 @@ const renderWithPlan = (plan: Plan) => {
 describe('ProviderContextMock', () => {
   beforeEach(() => {
     mockPlan = Plan.sandbox
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
   it('should display sandbox plan type when mocked with sandbox plan', async () => {
     const { getByTestId } = renderWithPlan(Plan.sandbox)