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/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.spec.tsx

@@ -7,18 +7,18 @@ import type { NotionPage } from '@/models/common'
 import type { OnlineDriveFile } from '@/models/pipeline'
 import { DatasourceType, OnlineDriveFileType } from '@/models/pipeline'
 
-// Uses __mocks__/react-i18next.ts automatically
+// Uses global react-i18next mock from web/vitest.setup.ts
 
 // Mock dataset-detail context - needs mock to control return values
-const mockDocForm = jest.fn()
-jest.mock('@/context/dataset-detail', () => ({
+const mockDocForm = vi.fn()
+vi.mock('@/context/dataset-detail', () => ({
   useDatasetDetailContextWithSelector: (_selector: (s: { dataset: { doc_form: ChunkingMode } }) => ChunkingMode) => {
     return mockDocForm()
   },
 }))
 
 // Mock document picker - needs mock for simplified interaction testing
-jest.mock('../../../common/document-picker/preview-document-picker', () => ({
+vi.mock('../../../common/document-picker/preview-document-picker', () => ({
   __esModule: true,
   default: ({ files, onChange, value }: {
     files: Array<{ id: string; name: string; extension: string }>
@@ -53,11 +53,11 @@ const createMockLocalFile = (overrides?: Partial<CustomFile>): CustomFile => ({
   extension: 'pdf',
   lastModified: Date.now(),
   webkitRelativePath: '',
-  arrayBuffer: jest.fn() as () => Promise<ArrayBuffer>,
-  bytes: jest.fn() as () => Promise<Uint8Array>,
-  slice: jest.fn() as (start?: number, end?: number, contentType?: string) => Blob,
-  stream: jest.fn() as () => ReadableStream<Uint8Array>,
-  text: jest.fn() as () => Promise<string>,
+  arrayBuffer: vi.fn() as () => Promise<ArrayBuffer>,
+  bytes: vi.fn() as () => Promise<Uint8Array>,
+  slice: vi.fn() as (start?: number, end?: number, contentType?: string) => Blob,
+  stream: vi.fn() as () => ReadableStream<Uint8Array>,
+  text: vi.fn() as () => Promise<string>,
   ...overrides,
 } as CustomFile)
 
@@ -114,16 +114,16 @@ const defaultProps = {
   isIdle: false,
   isPending: false,
   estimateData: undefined,
-  onPreview: jest.fn(),
-  handlePreviewFileChange: jest.fn(),
-  handlePreviewOnlineDocumentChange: jest.fn(),
-  handlePreviewWebsitePageChange: jest.fn(),
-  handlePreviewOnlineDriveFileChange: jest.fn(),
+  onPreview: vi.fn(),
+  handlePreviewFileChange: vi.fn(),
+  handlePreviewOnlineDocumentChange: vi.fn(),
+  handlePreviewWebsitePageChange: vi.fn(),
+  handlePreviewOnlineDriveFileChange: vi.fn(),
 }
 
 describe('ChunkPreview', () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
     mockDocForm.mockReturnValue(ChunkingMode.text)
   })
 
@@ -190,7 +190,7 @@ describe('ChunkPreview', () => {
     })
 
     it('should call onPreview when preview button is clicked', () => {
-      const onPreview = jest.fn()
+      const onPreview = vi.fn()
 
       render(<ChunkPreview {...defaultProps} isIdle={true} onPreview={onPreview} />)
 
@@ -271,7 +271,7 @@ describe('ChunkPreview', () => {
 
   describe('Document Selection', () => {
     it('should handle local file selection change', () => {
-      const handlePreviewFileChange = jest.fn()
+      const handlePreviewFileChange = vi.fn()
       const localFiles = [
         createMockLocalFile({ id: 'file-1', name: 'file1.pdf' }),
         createMockLocalFile({ id: 'file-2', name: 'file2.pdf' }),
@@ -293,7 +293,7 @@ describe('ChunkPreview', () => {
     })
 
     it('should handle online document selection change', () => {
-      const handlePreviewOnlineDocumentChange = jest.fn()
+      const handlePreviewOnlineDocumentChange = vi.fn()
       const onlineDocuments = [
         createMockNotionPage({ page_id: 'page-1', page_name: 'Page 1' }),
         createMockNotionPage({ page_id: 'page-2', page_name: 'Page 2' }),
@@ -315,7 +315,7 @@ describe('ChunkPreview', () => {
     })
 
     it('should handle website page selection change', () => {
-      const handlePreviewWebsitePageChange = jest.fn()
+      const handlePreviewWebsitePageChange = vi.fn()
       const websitePages = [
         createMockCrawlResult({ source_url: 'https://example1.com', title: 'Site 1' }),
         createMockCrawlResult({ source_url: 'https://example2.com', title: 'Site 2' }),
@@ -337,7 +337,7 @@ describe('ChunkPreview', () => {
     })
 
     it('should handle online drive file selection change', () => {
-      const handlePreviewOnlineDriveFileChange = jest.fn()
+      const handlePreviewOnlineDriveFileChange = vi.fn()
       const onlineDriveFiles = [
         createMockOnlineDriveFile({ id: 'drive-1', name: 'file1.docx' }),
         createMockOnlineDriveFile({ id: 'drive-2', name: 'file2.docx' }),

web/app/components/datasets/documents/create-from-pipeline/preview/file-preview.spec.tsx

@@ -3,11 +3,11 @@ import React from 'react'
 import FilePreview from './file-preview'
 import type { CustomFile as File } from '@/models/datasets'
 
-// Uses __mocks__/react-i18next.ts automatically
+// Uses global react-i18next mock from web/vitest.setup.ts
 
 // Mock useFilePreview hook - needs to be mocked to control return values
-const mockUseFilePreview = jest.fn()
-jest.mock('@/service/use-common', () => ({
+const mockUseFilePreview = vi.fn()
+vi.mock('@/service/use-common', () => ({
   useFilePreview: (fileID: string) => mockUseFilePreview(fileID),
 }))
 
@@ -20,11 +20,11 @@ const createMockFile = (overrides?: Partial<File>): File => ({
   extension: 'pdf',
   lastModified: Date.now(),
   webkitRelativePath: '',
-  arrayBuffer: jest.fn() as () => Promise<ArrayBuffer>,
-  bytes: jest.fn() as () => Promise<Uint8Array>,
-  slice: jest.fn() as (start?: number, end?: number, contentType?: string) => Blob,
-  stream: jest.fn() as () => ReadableStream<Uint8Array>,
-  text: jest.fn() as () => Promise<string>,
+  arrayBuffer: vi.fn() as () => Promise<ArrayBuffer>,
+  bytes: vi.fn() as () => Promise<Uint8Array>,
+  slice: vi.fn() as (start?: number, end?: number, contentType?: string) => Blob,
+  stream: vi.fn() as () => ReadableStream<Uint8Array>,
+  text: vi.fn() as () => Promise<string>,
   ...overrides,
 } as File)
 
@@ -34,12 +34,12 @@ const createMockFilePreviewData = (content: string = 'This is the file content')
 
 const defaultProps = {
   file: createMockFile(),
-  hidePreview: jest.fn(),
+  hidePreview: vi.fn(),
 }
 
 describe('FilePreview', () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
     mockUseFilePreview.mockReturnValue({
       data: undefined,
       isFetching: false,
@@ -202,7 +202,7 @@ describe('FilePreview', () => {
 
   describe('User Interactions', () => {
     it('should call hidePreview when close button is clicked', () => {
-      const hidePreview = jest.fn()
+      const hidePreview = vi.fn()
 
       render(<FilePreview {...defaultProps} hidePreview={hidePreview} />)
 

web/app/components/datasets/documents/create-from-pipeline/preview/online-document-preview.spec.tsx

@@ -5,32 +5,32 @@ import OnlineDocumentPreview from './online-document-preview'
 import type { NotionPage } from '@/models/common'
 import Toast from '@/app/components/base/toast'
 
-// Uses __mocks__/react-i18next.ts automatically
+// Uses global react-i18next mock from web/vitest.setup.ts
 
 // Spy on Toast.notify
-const toastNotifySpy = jest.spyOn(Toast, 'notify')
+const toastNotifySpy = vi.spyOn(Toast, 'notify')
 
 // Mock dataset-detail context - needs mock to control return values
-const mockPipelineId = jest.fn()
-jest.mock('@/context/dataset-detail', () => ({
+const mockPipelineId = vi.fn()
+vi.mock('@/context/dataset-detail', () => ({
   useDatasetDetailContextWithSelector: (_selector: (s: { dataset: { pipeline_id: string } }) => string) => {
     return mockPipelineId()
   },
 }))
 
 // Mock usePreviewOnlineDocument hook - needs mock to control mutation behavior
-const mockMutateAsync = jest.fn()
-const mockUsePreviewOnlineDocument = jest.fn()
-jest.mock('@/service/use-pipeline', () => ({
+const mockMutateAsync = vi.fn()
+const mockUsePreviewOnlineDocument = vi.fn()
+vi.mock('@/service/use-pipeline', () => ({
   usePreviewOnlineDocument: () => mockUsePreviewOnlineDocument(),
 }))
 
 // Mock data source store - needs mock to control store state
 const mockCurrentCredentialId = 'credential-123'
-const mockGetState = jest.fn(() => ({
+const mockGetState = vi.fn(() => ({
   currentCredentialId: mockCurrentCredentialId,
 }))
-jest.mock('../data-source/store', () => ({
+vi.mock('../data-source/store', () => ({
   useDataSourceStore: () => ({
     getState: mockGetState,
   }),
@@ -51,12 +51,12 @@ const createMockNotionPage = (overrides?: Partial<NotionPage>): NotionPage => ({
 const defaultProps = {
   currentPage: createMockNotionPage(),
   datasourceNodeId: 'datasource-node-123',
-  hidePreview: jest.fn(),
+  hidePreview: vi.fn(),
 }
 
 describe('OnlineDocumentPreview', () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
     mockPipelineId.mockReturnValue('pipeline-123')
     mockUsePreviewOnlineDocument.mockReturnValue({
       mutateAsync: mockMutateAsync,
@@ -287,7 +287,7 @@ describe('OnlineDocumentPreview', () => {
 
   describe('User Interactions', () => {
     it('should call hidePreview when close button is clicked', () => {
-      const hidePreview = jest.fn()
+      const hidePreview = vi.fn()
 
       render(<OnlineDocumentPreview {...defaultProps} hidePreview={hidePreview} />)
 

web/app/components/datasets/documents/create-from-pipeline/preview/web-preview.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import WebsitePreview from './web-preview'
 import type { CrawlResultItem } from '@/models/datasets'
 
-// Uses __mocks__/react-i18next.ts automatically
+// Uses global react-i18next mock from web/vitest.setup.ts
 
 // Test data factory
 const createMockCrawlResult = (overrides?: Partial<CrawlResultItem>): CrawlResultItem => ({
@@ -16,12 +16,12 @@ const createMockCrawlResult = (overrides?: Partial<CrawlResultItem>): CrawlResul
 
 const defaultProps = {
   currentWebsite: createMockCrawlResult(),
-  hidePreview: jest.fn(),
+  hidePreview: vi.fn(),
 }
 
 describe('WebsitePreview', () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   describe('Rendering', () => {
@@ -92,7 +92,7 @@ describe('WebsitePreview', () => {
 
   describe('User Interactions', () => {
     it('should call hidePreview when close button is clicked', () => {
-      const hidePreview = jest.fn()
+      const hidePreview = vi.fn()
 
       render(<WebsitePreview {...defaultProps} hidePreview={hidePreview} />)
 
@@ -237,8 +237,8 @@ describe('WebsitePreview', () => {
     })
 
     it('should call new hidePreview when prop changes', () => {
-      const hidePreview1 = jest.fn()
-      const hidePreview2 = jest.fn()
+      const hidePreview1 = vi.fn()
+      const hidePreview2 = vi.fn()
 
       const { rerender } = render(<WebsitePreview {...defaultProps} hidePreview={hidePreview1} />)