test(react-component): migrate jest to vitest

ref: #13676

Signed-off-by: Thibault Barske <[email protected]>

packages/manager-react-components/package.json

@@ -14,10 +14,9 @@
     "dev": "tsc",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
     "start": "storybook dev -p 6006",
-    "test": "jest --coverage -u",
+    "test": "vitest",
     "test:cov": "vitest run --coverage",
-    "test:e2e": "tsc && npx playwright test --ui --debug",
-    "test:watch": "jest --watch"
+    "test:watch": "vitest"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx,json,css,md}": [
@@ -112,7 +111,6 @@
     "i18next": "^23.8.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^11.18.1",
     "react-router-dom": "^6.3.0",
     "zustand": "^4.5.0"
   }

packages/manager-react-components/src/components/ManagerButton/ManagerButton.spec.tsx

@@ -5,18 +5,18 @@ import fr_FR from './translations/Messages_fr_FR.json';
 import { useAuthorizationIam } from '../../hooks/iam';
 import { IamAuthorizationResponse } from '../../hooks/iam/iam.interface';
 
-jest.mock('../../hooks/iam');
+vitest.mock('../../hooks/iam');
 
 const renderComponent = (props: ManagerButtonProps) => {
   return render(<ManagerButton {...props} />);
 };
 
 const mockedHook =
-  useAuthorizationIam as unknown as jest.Mock<IamAuthorizationResponse>;
+  useAuthorizationIam as unknown as vitest.Mock<IamAuthorizationResponse>;
 
 describe('ManagerButton tests', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vitest.resetAllMocks();
   });
 
   describe('should display manager button', () => {

packages/manager-react-components/src/components/ManagerText/ManagerText.spec.tsx

@@ -1,11 +1,13 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { screen } from '@testing-library/react';
 import { ManagerText, ManagerTextProps } from './ManagerText';
 import { render } from '../../utils/test.provider';
 import fr_FR from './translations/Messages_fr_FR.json';
 import { useAuthorizationIam } from '../../hooks/iam';
 import { IamAuthorizationResponse } from '../../hooks/iam/iam.interface';
 
-jest.mock('../../hooks/iam');
+vitest.mock('../../hooks/iam');
 
 const renderComponent = (props: ManagerTextProps) => {
   return render(<ManagerText {...props} />);
@@ -15,7 +17,7 @@ const mockedHook =
 
 describe('ManagerText tests', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vitest.resetAllMocks();
   });
 
   describe('should display manager text', () => {

packages/manager-react-components/src/components/action-banner/action-banner.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { fireEvent, screen, render, act } from '@testing-library/react';
 import { ActionBanner, ActionBannerProps } from './action-banner.component';
 
@@ -16,7 +18,7 @@ describe('ActionBanner tests', () => {
   });
 
   it('should have a working call to action button', () => {
-    const mockOnClick = jest.fn();
+    const mockOnClick = vitest.fn();
 
     renderComponent({
       message: 'hello world',

packages/manager-react-components/src/components/clipboard/clipboard.spec.tsx

@@ -1,3 +1,5 @@
+import { vitest } from 'vitest';
+import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../utils/test.provider';
 import { Clipboard } from './clipboard.component';
@@ -33,7 +35,7 @@ describe('Clipboard', () => {
     const { getByTestId } = await setupSpecTest();
     const clipboard = getByTestId('clipboard');
 
-    const clickHandler = jest.spyOn(clipboard, 'click');
+    const clickHandler = vitest.spyOn(clipboard, 'click');
     clipboard.click = () => {
       throw new Error('Mock error on click');
     };

packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.spec.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { waitFor, screen } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import { DashboardTile } from './dashboard-tile.component';
-import '@testing-library/jest-dom';
 
 const testItem = {
   id: 'id',

packages/manager-react-components/src/components/content/headers/headers.spec.tsx

@@ -1,3 +1,4 @@
+import { vitest } from 'vitest';
 import { waitFor, screen } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import {
@@ -9,7 +10,7 @@ import {
 import { IamAuthorizationResponse } from '../../../hooks/iam/iam.interface';
 import { useAuthorizationIam } from '../../../hooks/iam';
 
-jest.mock('../../../hooks/iam');
+vitest.mock('../../../hooks/iam');
 
 const mockedHook =
   useAuthorizationIam as unknown as jest.Mock<IamAuthorizationResponse>;

packages/manager-react-components/src/components/content/price/price.spec.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { screen } from '@testing-library/react';
 import Price from './price.component';
 import { render } from '../../../utils/test.provider';
 import { IntervalUnitType, OvhSubsidiary } from '../../../enumTypes';
 
 describe('Price component', () => {
-  const renderPriceComponent = (props) => {
+  const renderPriceComponent = (props: React.ComponentProps<typeof Price>) => {
     render(<Price {...props} />);
   };
 
@@ -23,6 +24,7 @@ describe('Price component', () => {
       ...baseProps,
       value: 0,
       intervalUnit: IntervalUnitType.none,
+      locale: localeFr,
     };
     renderPriceComponent(props);
     const priceElement = screen.getByText('Inclus');

packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { vitest } from 'vitest';
+import React, { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import {
   ColumnSort,
@@ -8,16 +9,21 @@ import {
 } from './datagrid.component';
 import DataGridTextCell from './text-cell.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => {
-    return {
-      t: (str: string) => str,
-      i18n: {
-        changeLanguage: () => new Promise(() => {}),
-      },
-    };
-  },
-}));
+vitest.mock('react-i18next', async () => {
+  const originalModule = await vitest.importActual('react-i18next');
+
+  return {
+    ...originalModule,
+    useTranslation: () => {
+      return {
+        t: (str: string) => str,
+        i18n: {
+          changeLanguage: () => new Promise(() => {}),
+        },
+      };
+    },
+  };
+});
 
 const sampleColumns = [
   {
@@ -69,6 +75,15 @@ const DatagridTest = ({
 };
 
 describe('Paginated datagrid component', () => {
+  beforeAll(() => {
+    // Mock attachInternals method for all instances of custom elements
+    (HTMLElement.prototype.attachInternals as unknown) = vitest.fn(() => ({
+      // Mock the properties or methods used from internals
+      setValidity: vitest.fn(),
+      states: new Set(),
+    }));
+  });
+
   it('should display the correct number of columns', async () => {
     const { container } = render(
       <DatagridTest
@@ -97,7 +112,7 @@ describe('Paginated datagrid component', () => {
   });
 
   it('should call sort function when clicking columns header', async () => {
-    const handleSortChange = jest.fn();
+    const handleSortChange = vitest.fn();
     const SortTest = () => {
       const [sorting, setSorting] = useState({ id: 'a', desc: true });
       return (

packages/manager-react-components/src/components/filters/filter-add.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { FilterAdd, FilterAddProps } from './filter-add.component';
 import { render } from '../../utils/test.provider';
 
@@ -7,7 +9,7 @@ const renderComponent = (props: FilterAddProps) => {
 
 describe('FilterAdd tests', () => {
   it('should deactivate the add filter button when value est undefined', () => {
-    const mockOnAddFilter = jest.fn();
+    const mockOnAddFilter = vitest.fn();
     const props = {
       columns: [
         {
@@ -33,7 +35,7 @@ describe('FilterAdd tests', () => {
   });
 
   it('should set the id of first columns items as value of the id select', () => {
-    const mockOnAddFilter = jest.fn();
+    const mockOnAddFilter = vitest.fn();
     const props = {
       columns: [
         {

packages/manager-react-components/src/components/filters/filter-list.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { OsdsChip } from '@ovhcloud/ods-components';
 import { act } from '@testing-library/react';
 import { FilterList, FilterListProps } from './filter-list.component';
@@ -11,7 +13,7 @@ describe('FilterList tests', () => {
   it('should not display chips when the filters props is empty', () => {
     const propsWithEmptyFilters = {
       filters: [],
-      onRemoveFilter: jest.fn(),
+      onRemoveFilter: vitest.fn(),
     } as FilterListProps;
 
     const { container } = renderComponent(propsWithEmptyFilters);
@@ -29,7 +31,7 @@ describe('FilterList tests', () => {
           label: "Nom d'utilisateur",
         },
       ],
-      onRemoveFilter: jest.fn(),
+      onRemoveFilter: vitest.fn(),
     } as FilterListProps;
 
     const { container, getAllByTestId } = renderComponent(
@@ -58,7 +60,7 @@ describe('FilterList tests', () => {
           label: "Nom d'utilisateur",
         },
       ],
-      onRemoveFilter: jest.fn(),
+      onRemoveFilter: vitest.fn(),
     } as FilterListProps;
 
     const { container, getAllByTestId } = renderComponent(
@@ -72,7 +74,7 @@ describe('FilterList tests', () => {
   });
 
   it('should call onRemoveFilter function when the chip cross is clicked', () => {
-    const mockOnRemoveFilter = jest.fn();
+    const mockOnRemoveFilter = vitest.fn();
     const propsWithOneFiltersItem = {
       filters: [
         {

packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { fireEvent, screen } from '@testing-library/react';
 import { GuidesHeader, GuidesHeaderProps } from './guides-header.component';
 import { render } from '../../utils/test.provider';
@@ -59,7 +61,7 @@ describe('GuidesHeader tests', () => {
   });
 
   it('should trigger onGuideClick', () => {
-    const onGuideClick = jest.fn();
+    const onGuideClick = vitest.fn();
     const { container } = renderComponent({
       label: 'hello',
       guides,
@@ -73,7 +75,7 @@ describe('GuidesHeader tests', () => {
   });
 
   it('should not trigger onGuideClick if it is undefined', () => {
-    const onGuideClick = jest.fn();
+    const onGuideClick = vitest.fn();
     const { container } = renderComponent({
       label: 'hello',
       guides,

packages/manager-react-components/src/components/navigation/card/card.spec.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { waitFor } from '@testing-library/react';
 import {
   ODS_THEME_COLOR_HUE,

packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx

@@ -1,11 +1,13 @@
+import React from 'react';
+import { vitest } from 'vitest';
 import { waitFor, screen, fireEvent } from '@testing-library/react';
 import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import { ActionMenu, ActionMenuProps } from './action.component';
 import { render } from '../../../../utils/test.provider';
 import { useAuthorizationIam } from '../../../../hooks/iam';
 import { IamAuthorizationResponse } from '../../../../hooks/iam/iam.interface';
 
-jest.mock('../../../../hooks/iam');
+vitest.mock('../../../../hooks/iam');
 
 const actionItems: ActionMenuProps = {
   items: [

packages/manager-react-components/src/components/notifications/notifications.spec.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
+import { vitest } from 'vitest';
+import React, { useEffect } from 'react';
 import { render } from '@testing-library/react';
 import { useNotifications, NotificationType } from './useNotifications';
 import { Notifications } from './notifications.component';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+vitest.mock('react-router-dom', async () => ({
+  ...(await vitest.importActual('react-router-dom')),
   useLocation: () => ({
     pathname: '/foo',
   }),

packages/manager-react-components/src/components/pci-maintenance-banner/PciMaintenanceBanner.component.spec.tsx

@@ -1,10 +1,10 @@
-import { screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
+import { vitest } from 'vitest';
+import React, { screen } from '@testing-library/react';
 import { PciMaintenanceBanner } from './PciMaintenanceBanner.component';
 import { render } from '../../utils/test.provider';
 
-jest.mock('react-i18next', () => {
-  const original = jest.requireActual('react-i18next');
+vitest.mock('react-i18next', async () => {
+  const original = await vitest.importActual('react-i18next');
   return {
     ...original,
     useTranslation: () => ({