migrate to vitest

Signed-off-by: Teo Koon Peng <teokoonpeng@gmail.com>

packages/react-components/lib/alert-dialog.spec.tsx

@@ -22,8 +22,8 @@ describe('AcknowledgeAndCloseAlertDialog', () => {
         },
       ];
     };
-    const acknowledge = jest.fn();
-    const dismiss = jest.fn();
+    const acknowledge = vi.fn();
+    const dismiss = vi.fn();
     const root = render(
       <ThemeProvider theme={theme}>
         <AlertDialog
@@ -60,8 +60,8 @@ describe('AcknowledgeAndCloseAlertDialog', () => {
         },
       ];
     };
-    const acknowledge = jest.fn();
-    const close = jest.fn();
+    const acknowledge = vi.fn();
+    const close = vi.fn();
     const root = render(
       <ThemeProvider theme={theme}>
         <AlertDialog

packages/react-components/lib/confirmation-dialog.spec.tsx

@@ -3,14 +3,14 @@ import { ConfirmationDialog } from './confirmation-dialog';
 
 describe('ConfirmDialogActions', () => {
   it('calls onClose when cancel button is clicked', () => {
-    const onClose = jest.fn();
+    const onClose = vi.fn();
     const root = render(<ConfirmationDialog open={true} onClose={onClose} />);
     fireEvent.click(root.getByText('Cancel'));
     expect(onClose).toHaveBeenCalled();
   });
 
   it('calls onSubmit when form is submitted', () => {
-    const onSubmit = jest.fn();
+    const onSubmit = vi.fn();
     const root = render(<ConfirmationDialog open={true} onSubmit={onSubmit} />);
     fireEvent.click(root.getByText('OK'));
     expect(onSubmit).toHaveBeenCalled();

packages/react-components/lib/header-bar.spec.tsx

@@ -6,7 +6,7 @@ import { HeaderBar } from './header-bar';
 
 describe('Header Bar', () => {
   it('renders correctly', () => {
-    const mockOnTabChange = jest.fn();
+    const mockOnTabChange = vi.fn();
     render(
       <HeaderBar>
         <NavigationBar onTabChange={mockOnTabChange} value={'building'}>

packages/react-components/lib/lifts/lift-request-dialog.spec.tsx

@@ -6,7 +6,7 @@ import { makeLift, makeLiftState } from './test-utils.spec';
 
 describe('Lift request form', () => {
   it('destination is required', async () => {
-    const mockOnClose = jest.fn();
+    const mockOnClose = vi.fn();
     const lift = makeLift();
     const liftState = makeLiftState();
     render(

packages/react-components/lib/logo-button.spec.tsx

@@ -3,7 +3,7 @@ import { LogoButton } from './logo-button';
 
 describe('LogoButton', () => {
   it('renders and is clickable', () => {
-    const mockOnClick = jest.fn();
+    const mockOnClick = vi.fn();
     render(
       <LogoButton
         src="/base/test-data/assets/roshealth-logo-white.png"

packages/react-components/lib/navigation-bar.spec.tsx

@@ -4,7 +4,7 @@ import { NavigationBar } from './navigation-bar';
 
 describe('Banner Tab', () => {
   it('renders correctly', () => {
-    const mockOnTabChange = jest.fn();
+    const mockOnTabChange = vi.fn();
     render(
       <NavigationBar onTabChange={mockOnTabChange} value={'building'}>
         <Tab

packages/react-components/lib/robots/mutex-group-table.spec.tsx

@@ -15,8 +15,8 @@ describe('Mutex group table', () => {
         requestedBy: ['fleet1/robot2'],
       },
     ];
-    const group1Click = jest.fn();
-    const group2Click = jest.fn();
+    const group1Click = vi.fn();
+    const group2Click = vi.fn();
     const root = render(
       <MutexGroupTable
         mutexGroups={mutexGroups}

packages/react-components/lib/robots/robot-table-datagrid.spec.tsx

@@ -31,7 +31,7 @@ describe('RobotTable', () => {
   });
 
   it('onRobotClick is called when row is clicked', () => {
-    const onRobotClick = jest.fn();
+    const onRobotClick = vi.fn();
     const root = render(
       <RobotDataGridTable
         robots={[{ fleet: 'test_fleet', name: 'test_robot' }]}

packages/react-components/lib/tasks/task-schedule-event-edit-delete-popup.spec.tsx

@@ -5,7 +5,7 @@ describe('EventEditDeletePopup', () => {
   const currentValue = 'current';
   const allValue = 'all';
   const value = 'current';
-  const onChange = jest.fn();
+  const onChange = vi.fn();
 
   it('handles onChange event', () => {
     const { getByLabelText } = render(

packages/react-components/lib/tasks/task-table-datagrid.spec.tsx

@@ -13,14 +13,14 @@ describe('Tasks table', () => {
 
   tasks.data = [makeTaskState('task_0'), makeTaskState('task_1')];
   let root: RenderResult;
-  let mockAddMoreRows: ReturnType<typeof jest.fn>;
+  let mockAddMoreRows: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
     const setFilterFields: FilterFields = {
       model: undefined,
     };
 
-    mockAddMoreRows = jest.fn();
+    mockAddMoreRows = vi.fn();
     root = render(
       <TaskDataGridTable
         tasks={tasks}

packages/react-components/lib/transfer-list.spec.tsx

@@ -25,7 +25,7 @@ describe('TransferList', () => {
   });
 
   it('transfers correct items', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const root = render(<TransferList leftItems={left} rightItems={right} onTransfer={spy} />);
     fireEvent.click(root.getByText('one'));
     fireEvent.click(root.getByLabelText('move selected right', { selector: 'button' }));

packages/react-components/package.json

@@ -8,8 +8,8 @@
     "lint": "tsc && eslint --max-warnings 0 lib",
     "prepack": "pnpm run lint && jest",
     "start": "storybook dev -p 6006",
-    "test": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
   },
   "author": "koonpeng@openrobotics.org",
   "license": "Apache-2.0",
@@ -35,7 +35,6 @@
     "date-fns": "^2.30.0",
     "debug": "^4.2.0",
     "eventemitter3": "^4.0.7",
-    "jest-environment-jsdom": "^29.7.0",
     "node-vibrant": "^3.1.6",
     "rbush": "^3.0.1",
     "react": "^18.2.0",
@@ -63,11 +62,9 @@
     "@storybook/react-vite": "^8.2.6",
     "@storybook/test": "^8.0.5",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/debug": "^4.1.5",
-    "@types/jest": "^29.5.12",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-grid-layout": "^1.3.2",
@@ -80,14 +77,14 @@
     "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
+    "jsdom": "^24.1.1",
     "process": "0.11.10",
     "puppeteer": "*",
     "require-from-string": "^2.0.2",
     "storybook": "^8.0.5",
-    "ts-jest": "^29.1.2",
     "typescript": "~5.4.3",
-    "typescript-eslint": "^7.5.0"
+    "typescript-eslint": "^7.5.0",
+    "vitest": "^2.0.4"
   },
   "eslintConfig": {
     "extends": [

packages/react-components/tsconfig.json

@@ -4,6 +4,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vitest/globals"],
     "module": "ESNext",
     "skipLibCheck": true,
 

packages/react-components/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: { globals: true, environment: 'jsdom', passWithNoTests: true },
+});