From c814b31d4703db3fd7f52e90960262eaebe08d07 Mon Sep 17 00:00:00 2001 From: Thibault Barske Date: Sat, 19 Oct 2024 12:49:24 +0200 Subject: [PATCH] test(react-component): migrate jest to vitest ref: #13676 Signed-off-by: Thibault Barske --- .../babel.config.json | 8 -- .../manager-react-components/jest.config.js | 18 ----- .../manager-react-components/jest.setup.ts | 24 ------ .../manager-react-components/package.json | 6 +- .../ManagerButton/ManagerButton.spec.tsx | 6 +- .../ManagerText/ManagerText.spec.tsx | 6 +- .../action-banner/action-banner.spec.tsx | 4 +- .../components/clipboard/clipboard.spec.tsx | 4 +- .../dashboard-tile/dashboard-tile.spec.tsx | 2 +- .../content/headers/headers.spec.tsx | 3 +- .../components/content/price/price.spec.tsx | 4 +- .../src/components/datagrid/datagrid.spec.tsx | 39 ++++++--- .../components/filters/filter-add.spec.tsx | 6 +- .../components/filters/filter-list.spec.tsx | 10 ++- .../guides-header.component.spec.tsx | 6 +- .../components/navigation/card/card.spec.tsx | 1 + .../navigation/menus/action/action.spec.tsx | 4 +- .../notifications/notifications.spec.tsx | 7 +- .../PciMaintenanceBanner.component.spec.tsx | 8 +- .../redirection-guard.spec.tsx | 8 +- .../src/components/region/region.spec.tsx | 5 +- .../src/components/table/table.spec.tsx | 3 +- .../components/templates/base/base.spec.tsx | 4 +- .../templates/dashboard/dashboard.spec.tsx | 4 +- .../__snapshots__/delete-modal.spec.tsx.snap | 70 +++++++++++++++- .../delete-modal/delete-modal.spec.tsx | 20 +++-- .../components/templates/error/error.spec.tsx | 8 +- .../templates/onboarding/onboarding.spec.tsx | 1 + .../update-name-modal.spec.tsx.snap | 81 ++++++++++++++++++- .../update-name-modal.spec.tsx | 8 +- .../description/description.spec.tsx | 2 +- .../typography/links/links.spec.tsx | 1 + .../src/hooks/datagrid/useIcebergV2.spec.tsx | 33 +++++--- .../hooks/datagrid/useResourcesV6.spec.tsx | 67 +++++++++------ .../src/hooks/datagrid/useResourcesV6.tsx | 2 +- .../src/hooks/date/useFormattedDate.spec.tsx | 3 +- .../date/useFormattedDateEnglish.spec.tsx | 3 +- .../src/hooks/pci/useMaintenance.spec.tsx | 28 +++++-- .../region/useTranslatedMicroRegions.spec.tsx | 3 +- .../manager-react-components/tsconfig.json | 34 ++++---- .../manager-react-components/vite.config.mjs | 8 ++ .../manager-react-components/vite.config.ts | 29 ------- .../manager-react-components/vitest.config.js | 33 ++++++++ 43 files changed, 421 insertions(+), 203 deletions(-) delete mode 100644 packages/manager-react-components/babel.config.json delete mode 100644 packages/manager-react-components/jest.config.js delete mode 100644 packages/manager-react-components/jest.setup.ts create mode 100644 packages/manager-react-components/vite.config.mjs delete mode 100644 packages/manager-react-components/vite.config.ts create mode 100644 packages/manager-react-components/vitest.config.js diff --git a/packages/manager-react-components/babel.config.json b/packages/manager-react-components/babel.config.json deleted file mode 100644 index 55ac0c83cd6a..000000000000 --- a/packages/manager-react-components/babel.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react"], - "env": { - "test": { - "presets": ["react-app"] - } - } -} diff --git a/packages/manager-react-components/jest.config.js b/packages/manager-react-components/jest.config.js deleted file mode 100644 index d4a07d9ed79a..000000000000 --- a/packages/manager-react-components/jest.config.js +++ /dev/null @@ -1,18 +0,0 @@ -module.exports = { - testMatch: ['/src/**/*.{spec,test}.{js,jsx,ts,tsx}'], - testEnvironment: 'jsdom', - testEnvironmentOptions: { - customExportConditions: [''], - }, - transformIgnorePatterns: [ - 'node_modules/(?!lodash-es|@ovh-ux|@ovhcloud|@stencil)', - ], - setupFilesAfterEnv: ['./jest.setup.ts'], - collectCoverageFrom: ['src/components/**/*.component.tsx', 'src/hooks/**/*'], - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], - moduleNameMapper: { - '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': - '/src/_mock_/images.tsx', - '^@/(.*)$': '/src/$1', - }, -}; diff --git a/packages/manager-react-components/jest.setup.ts b/packages/manager-react-components/jest.setup.ts deleted file mode 100644 index 3d3e7ac748bf..000000000000 --- a/packages/manager-react-components/jest.setup.ts +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { TextEncoder, TextDecoder } from 'util'; -import { Blob, File } from 'buffer'; - -import 'element-internals-polyfill'; - -Object.assign(global, { - TextDecoder, - TextEncoder, - React, -}); - -// eslint-disable-next-line -const { fetch, Headers, FormData, Request, Response } = require('undici'); - -Object.assign(global, { - fetch, - Blob, - File, - Headers, - FormData, - Request, - Response, -}); diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json index 3be77258ba63..4c42f8bd3dfe 100644 --- a/packages/manager-react-components/package.json +++ b/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" } diff --git a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.spec.tsx b/packages/manager-react-components/src/components/ManagerButton/ManagerButton.spec.tsx index a6689c9ba664..146645f64122 100644 --- a/packages/manager-react-components/src/components/ManagerButton/ManagerButton.spec.tsx +++ b/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(); }; const mockedHook = - useAuthorizationIam as unknown as jest.Mock; + useAuthorizationIam as unknown as vitest.Mock; describe('ManagerButton tests', () => { afterEach(() => { - jest.resetAllMocks(); + vitest.resetAllMocks(); }); describe('should display manager button', () => { diff --git a/packages/manager-react-components/src/components/ManagerText/ManagerText.spec.tsx b/packages/manager-react-components/src/components/ManagerText/ManagerText.spec.tsx index faeb70215395..e54ca8ba6ca8 100644 --- a/packages/manager-react-components/src/components/ManagerText/ManagerText.spec.tsx +++ b/packages/manager-react-components/src/components/ManagerText/ManagerText.spec.tsx @@ -1,3 +1,5 @@ +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'; @@ -5,7 +7,7 @@ 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(); @@ -15,7 +17,7 @@ const mockedHook = describe('ManagerText tests', () => { afterEach(() => { - jest.resetAllMocks(); + vitest.resetAllMocks(); }); describe('should display manager text', () => { diff --git a/packages/manager-react-components/src/components/action-banner/action-banner.spec.tsx b/packages/manager-react-components/src/components/action-banner/action-banner.spec.tsx index e7505a2f3ef8..41fd655b330a 100644 --- a/packages/manager-react-components/src/components/action-banner/action-banner.spec.tsx +++ b/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', diff --git a/packages/manager-react-components/src/components/clipboard/clipboard.spec.tsx b/packages/manager-react-components/src/components/clipboard/clipboard.spec.tsx index 8d047d9e9692..22cb5e2f5e6a 100644 --- a/packages/manager-react-components/src/components/clipboard/clipboard.spec.tsx +++ b/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'); }; diff --git a/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.spec.tsx b/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.spec.tsx index fea1e9bda39a..c79c8e64aa24 100644 --- a/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.spec.tsx +++ b/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', diff --git a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx index e2efc36b2282..9e19eeb69a13 100644 --- a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx +++ b/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; diff --git a/packages/manager-react-components/src/components/content/price/price.spec.tsx b/packages/manager-react-components/src/components/content/price/price.spec.tsx index 61456d9440c6..9eca7b5482c6 100644 --- a/packages/manager-react-components/src/components/content/price/price.spec.tsx +++ b/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) => { render(); }; @@ -23,6 +24,7 @@ describe('Price component', () => { ...baseProps, value: 0, intervalUnit: IntervalUnitType.none, + locale: localeFr, }; renderPriceComponent(props); const priceElement = screen.getByText('Inclus'); diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx index ffb9235337a0..945686b4d252 100644 --- a/packages/manager-react-components/src/components/datagrid/datagrid.spec.tsx +++ b/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( { }); 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 ( diff --git a/packages/manager-react-components/src/components/filters/filter-add.spec.tsx b/packages/manager-react-components/src/components/filters/filter-add.spec.tsx index 700498404812..5cc8817bb8d4 100644 --- a/packages/manager-react-components/src/components/filters/filter-add.spec.tsx +++ b/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: [ { diff --git a/packages/manager-react-components/src/components/filters/filter-list.spec.tsx b/packages/manager-react-components/src/components/filters/filter-list.spec.tsx index f6534b651cdc..32597a5c6805 100644 --- a/packages/manager-react-components/src/components/filters/filter-list.spec.tsx +++ b/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: [ { diff --git a/packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx b/packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx index 2cc4a835af4f..3021204df5fd 100644 --- a/packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx +++ b/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, diff --git a/packages/manager-react-components/src/components/navigation/card/card.spec.tsx b/packages/manager-react-components/src/components/navigation/card/card.spec.tsx index d55ae9c40abb..3cd0c394e40c 100644 --- a/packages/manager-react-components/src/components/navigation/card/card.spec.tsx +++ b/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, diff --git a/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx b/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx index b041053b341e..b87847b37420 100644 --- a/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx +++ b/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx @@ -1,3 +1,5 @@ +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'; @@ -5,7 +7,7 @@ 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: [ diff --git a/packages/manager-react-components/src/components/notifications/notifications.spec.tsx b/packages/manager-react-components/src/components/notifications/notifications.spec.tsx index c9c25d74bfdc..9a3741027585 100644 --- a/packages/manager-react-components/src/components/notifications/notifications.spec.tsx +++ b/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', }), diff --git a/packages/manager-react-components/src/components/pci-maintenance-banner/PciMaintenanceBanner.component.spec.tsx b/packages/manager-react-components/src/components/pci-maintenance-banner/PciMaintenanceBanner.component.spec.tsx index c89424967afb..4f4c29185654 100644 --- a/packages/manager-react-components/src/components/pci-maintenance-banner/PciMaintenanceBanner.component.spec.tsx +++ b/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: () => ({ diff --git a/packages/manager-react-components/src/components/redirection-guard/redirection-guard.spec.tsx b/packages/manager-react-components/src/components/redirection-guard/redirection-guard.spec.tsx index 09afe018e3c9..6093fabf6989 100644 --- a/packages/manager-react-components/src/components/redirection-guard/redirection-guard.spec.tsx +++ b/packages/manager-react-components/src/components/redirection-guard/redirection-guard.spec.tsx @@ -1,15 +1,17 @@ +import { vi } from 'vitest'; +import React from 'react'; import { render, screen } from '@testing-library/react'; import { Navigate } from 'react-router-dom'; import { RedirectionGuard } from './redirection-guard.component'; import '@testing-library/jest-dom'; -jest.mock('react-router-dom', () => ({ - Navigate: jest.fn(() => null), +vi.mock('react-router-dom', () => ({ + Navigate: vi.fn(() => null), })); describe('RedirectionGuard', () => { beforeEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should render children when condition is false', () => { diff --git a/packages/manager-react-components/src/components/region/region.spec.tsx b/packages/manager-react-components/src/components/region/region.spec.tsx index 483b87c57b43..cae4495d960e 100644 --- a/packages/manager-react-components/src/components/region/region.spec.tsx +++ b/packages/manager-react-components/src/components/region/region.spec.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { screen } from '@testing-library/react'; import { render } from '../../utils/test.provider'; import { Region, RegionProps } from './region.component'; @@ -14,7 +15,9 @@ describe('Region component', () => { ...DemoRegion.args, }); const regionElement = screen.getByText( - translatedRegion[`region_${DemoRegion.args.name}`], + translatedRegion[ + `region_${DemoRegion.args.name}` as keyof typeof translatedRegion + ], ); expect(regionElement).toBeVisible(); }); diff --git a/packages/manager-react-components/src/components/table/table.spec.tsx b/packages/manager-react-components/src/components/table/table.spec.tsx index b3af73662661..514433bb5034 100644 --- a/packages/manager-react-components/src/components/table/table.spec.tsx +++ b/packages/manager-react-components/src/components/table/table.spec.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { within } from '@testing-library/react'; import { OsdsText } from '@ovhcloud/ods-components/react'; import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components'; @@ -24,7 +25,7 @@ const setupSpecTest = async (customProps?: Partial) => - {mocksData.map((header) => ( + {mocksData.map((header: any) => ( {Object.keys(header).map((element) => ( {header[element]} diff --git a/packages/manager-react-components/src/components/templates/base/base.spec.tsx b/packages/manager-react-components/src/components/templates/base/base.spec.tsx index 0e383f656077..7d9b8939ee72 100644 --- a/packages/manager-react-components/src/components/templates/base/base.spec.tsx +++ b/packages/manager-react-components/src/components/templates/base/base.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; +import { vitest } from 'vitest'; import { waitFor, screen, fireEvent } from '@testing-library/react'; import { render } from '../../../utils/test.provider'; import { BaseLayout } from './base.component'; @@ -18,7 +20,7 @@ describe('BaseLayout component', () => { it('clicks on back link triggers return fn', async () => { const backLinkLabel = 'back link'; - const spy = jest.fn(); + const spy = vitest.fn(); render( { it('clicks on back link triggers return fn', async () => { const backLinkLabel = 'back link'; - const spy = jest.fn(); + const spy = vitest.fn(); render( renders loading modal 1`] = ` + + + + description + + +
+ + deleteInputLabel + +
+ + +
+ +
+ + Annuler + + + Supprimer + + + +`; exports[`Delete Modal component renders loading modal 1`] = ` diff --git a/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.spec.tsx b/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.spec.tsx index 157f9d2c0fe9..fdcc94edd570 100644 --- a/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.spec.tsx +++ b/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.spec.tsx @@ -1,12 +1,20 @@ -import { waitFor, screen, fireEvent } from '@testing-library/react'; +import { Mock, vitest } from 'vitest'; +import React, { waitFor, screen, fireEvent, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { render } from '../../../utils/test.provider'; import { DeleteModal } from './delete-modal.component'; -import '@testing-library/jest-dom'; -export const sharedProps = { - closeModal: jest.fn(), - onConfirmDelete: jest.fn(), +export const sharedProps: { + closeModal: Mock; + onConfirmDelete: Mock; + headline: 'headline'; + description: 'description'; + deleteInputLabel: 'deleteInputLabel'; + cancelButtonLabel: 'cancelButtonLabel'; + confirmButtonLabel: 'confirmButtonLabel'; +} = { + closeModal: vitest.fn(), + onConfirmDelete: vitest.fn(), headline: 'headline', description: 'description', deleteInputLabel: 'deleteInputLabel', @@ -85,7 +93,7 @@ describe('Delete Modal component', () => { await waitFor(() => expect(button).toBeEnabled()); - await userEvent.click(button); + act(async () => await userEvent.click(button)); await waitFor(() => { expect(sharedProps.onConfirmDelete).toHaveBeenCalled(); diff --git a/packages/manager-react-components/src/components/templates/error/error.spec.tsx b/packages/manager-react-components/src/components/templates/error/error.spec.tsx index cd663ec072de..26d9e0f2da03 100644 --- a/packages/manager-react-components/src/components/templates/error/error.spec.tsx +++ b/packages/manager-react-components/src/components/templates/error/error.spec.tsx @@ -1,9 +1,11 @@ +import React from 'react'; import { waitFor } from '@testing-library/react'; import { render } from '../../../utils/test.provider'; import { ErrorBanner } from './error.component'; import tradFr from './translations/Messages_fr_FR.json'; import { ErrorObject, ErrorBannerProps } from './error.types'; import { defaultProps } from './error.stories'; +import { vitest } from 'vitest'; const setupSpecTest = async ( customProps?: Partial, @@ -36,7 +38,7 @@ describe('specs:error.component', () => { }; const screen = await setupSpecTest( - { onRedirectHome: jest.fn() }, + { onRedirectHome: vitest.fn() }, customError, ); @@ -46,7 +48,7 @@ describe('specs:error.component', () => { }); it('calls onRedirectHome when home button is clicked', async () => { - const onRedirectHomeMock = jest.fn(); + const onRedirectHomeMock = vitest.fn(); const screen = await setupSpecTest({ onRedirectHome: onRedirectHomeMock, }); @@ -60,7 +62,7 @@ describe('specs:error.component', () => { }); it('calls onReloadPage when reload button is clicked', async () => { - const onReloadPageMock = jest.fn(); + const onReloadPageMock = vitest.fn(); const screen = await setupSpecTest({ onReloadPage: onReloadPageMock }); const reloadButton = screen.getByText( diff --git a/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx b/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx index 35ea6e731ebf..08f8f05e1604 100644 --- a/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx +++ b/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { waitFor } from '@testing-library/react'; import { render } from '../../../utils/test.provider'; import { diff --git a/packages/manager-react-components/src/components/templates/update-name-modal/__snapshots__/update-name-modal.spec.tsx.snap b/packages/manager-react-components/src/components/templates/update-name-modal/__snapshots__/update-name-modal.spec.tsx.snap index e160c5981bb3..d40e3f8be7fd 100644 --- a/packages/manager-react-components/src/components/templates/update-name-modal/__snapshots__/update-name-modal.spec.tsx.snap +++ b/packages/manager-react-components/src/components/templates/update-name-modal/__snapshots__/update-name-modal.spec.tsx.snap @@ -1,4 +1,83 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Update Name Modal component > renders loading modal 1`] = ` + + + + description + + +
+ + inputLabel + +
+ +
+ + regex epression to respect + +
+ +
+ +
+ + Annuler + + + Confirmer + + + +`; exports[`Update Name Modal component renders loading modal 1`] = ` diff --git a/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.spec.tsx b/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.spec.tsx index 1698ffaa64ff..b75997e7f33a 100644 --- a/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.spec.tsx +++ b/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.spec.tsx @@ -1,15 +1,15 @@ -import { waitFor, screen, fireEvent } from '@testing-library/react'; +import { vitest } from 'vitest'; +import React, { waitFor, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { render } from '../../../utils/test.provider'; import { UpdateNameModal, UpdateNameModalProps, } from './update-name-modal.component'; -import '@testing-library/jest-dom'; export const sharedProps: UpdateNameModalProps = { - closeModal: jest.fn(), - updateDisplayName: jest.fn(), + closeModal: vitest.fn(), + updateDisplayName: vitest.fn(), headline: 'headline', description: 'description', inputLabel: 'inputLabel', diff --git a/packages/manager-react-components/src/components/typography/description/description.spec.tsx b/packages/manager-react-components/src/components/typography/description/description.spec.tsx index f50b132b7f3e..2256f22c664f 100644 --- a/packages/manager-react-components/src/components/typography/description/description.spec.tsx +++ b/packages/manager-react-components/src/components/typography/description/description.spec.tsx @@ -1,4 +1,4 @@ -import { waitFor, screen } from '@testing-library/react'; +import React, { waitFor, screen } from '@testing-library/react'; import { render } from '../../../utils/test.provider'; import { Description, DescriptionProps } from './description.component'; diff --git a/packages/manager-react-components/src/components/typography/links/links.spec.tsx b/packages/manager-react-components/src/components/typography/links/links.spec.tsx index aa109cae3de2..09b317e992af 100644 --- a/packages/manager-react-components/src/components/typography/links/links.spec.tsx +++ b/packages/manager-react-components/src/components/typography/links/links.spec.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { screen } from '@testing-library/react'; import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core'; import { Links, LinkType } from './links.component'; diff --git a/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.spec.tsx b/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.spec.tsx index e8c8eb4e3d37..7f7e045199db 100644 --- a/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.spec.tsx +++ b/packages/manager-react-components/src/hooks/datagrid/useIcebergV2.spec.tsx @@ -1,14 +1,25 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import React from 'react'; +import { vitest } from 'vitest'; +import { + QueryClient, + QueryClientProvider, + useInfiniteQuery, +} from '@tanstack/react-query'; import { renderHook } from '@testing-library/react'; import { useResourcesIcebergV2 } from './useIcebergV2'; -/* eslint-disable @typescript-eslint/no-var-requires */ -const mockUseQuery = require('@tanstack/react-query').useInfiniteQuery; +vitest.mock('@tanstack/react-query', async () => { + const originalModule = await vitest.importActual('@tanstack/react-query'); + return { + ...originalModule, + useInfiniteQuery: vitest.fn(), + }; +}); const renderUseIcebergV2Hook = () => { const queryClient = new QueryClient(); - const wrapper = ({ children }) => ( + const wrapper = ({ children }: React.PropsWithChildren) => ( {children} ); @@ -78,19 +89,19 @@ const mockData = { pageParams: [null, 2], }; -jest.mock('@tanstack/react-query', () => { - const originalModule = jest.requireActual('@tanstack/react-query'); +vitest.mock('@tanstack/react-query', async () => { + const originalModule = await vitest.importActual('@tanstack/react-query'); return { ...originalModule, - useInfiniteQuery: jest.fn(), + useInfiniteQuery: vitest.fn(), }; }); describe('useIcebergV2', () => { beforeEach(() => { - mockUseQuery.mockImplementation(() => ({ + (useInfiniteQuery as jest.Mock).mockImplementation(() => ({ data: mockData, - error: null, + error: null as unknown, isLoading: false, hasNextPage: true, staleTime: 3000, @@ -99,13 +110,13 @@ describe('useIcebergV2', () => { }); it('should return flattenData with 10 items', async () => { - const result: any = renderUseIcebergV2Hook(); + const result = renderUseIcebergV2Hook(); const { flattenData } = result.current; expect(flattenData?.length).toEqual(10); }); it('should return hasNextPage with true', async () => { - const result: any = renderUseIcebergV2Hook(); + const result = renderUseIcebergV2Hook(); const { hasNextPage } = result.current; expect(hasNextPage).toBeTruthy(); }); diff --git a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.spec.tsx b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.spec.tsx index 6dc86a2ab9d3..16e94c277142 100644 --- a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.spec.tsx +++ b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.spec.tsx @@ -1,14 +1,28 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { renderHook } from '@testing-library/react'; -import { useResourcesV6 } from './useResourcesV6'; +import React from 'react'; +import { vitest } from 'vitest'; +import { + QueryClient, + QueryClientProvider, + useQuery, +} from '@tanstack/react-query'; +import { act, renderHook } from '@testing-library/react'; +import { IcebergFetchParamsV6 } from '@ovh-ux/manager-core-api'; +import { ResourcesV6Hook, useResourcesV6 } from './useResourcesV6'; -/* eslint-disable @typescript-eslint/no-var-requires */ -const mockUseQuery = require('@tanstack/react-query').useQuery; +vitest.mock('@tanstack/react-query', async () => { + const originalModule = await vitest.importActual('@tanstack/react-query'); + return { + ...originalModule, + useQuery: vitest.fn(), + }; +}); -const renderUseResourcesV6Hook = () => { +const renderUseResourcesV6Hook = ( + hookParams: Partial = {}, +) => { const queryClient = new QueryClient(); - const wrapper = ({ children }) => ( + const wrapper = ({ children }: React.PropsWithChildren) => ( {children} ); @@ -23,19 +37,18 @@ const renderUseResourcesV6Hook = () => { }, ]; - const { result } = renderHook( + return renderHook( () => useResourcesV6({ columns, route: '/dedicated/nasha', queryKey: ['/dedicated/nasha'], + ...hookParams, }), { wrapper, }, ); - - return result; }; const mockData = { @@ -46,17 +59,9 @@ const mockData = { totalCount: 26, }; -jest.mock('@tanstack/react-query', () => { - const originalModule = jest.requireActual('@tanstack/react-query'); - return { - ...originalModule, - useQuery: jest.fn(), - }; -}); - describe('useResourcesV6', () => { beforeEach(() => { - mockUseQuery.mockImplementation(() => ({ + (useQuery as jest.Mock).mockImplementation(() => ({ data: mockData, error: null, isLoading: false, @@ -67,25 +72,41 @@ describe('useResourcesV6', () => { }); it('should return flattenData with 10 items, 10 items by cursor', async () => { - const result: any = renderUseResourcesV6Hook(); + const { result } = renderUseResourcesV6Hook(); const { flattenData } = result.current; expect(flattenData?.length).toEqual(10); }); + it('should return flattenData with 20 items sorted by cursor without dupicated elements', async () => { + const hook = renderUseResourcesV6Hook(); + act(() => hook.rerender()); + act(() => hook.result.current.setSorting({ desc: false, id: 'name' })); + act(() => hook.rerender()); + act(() => hook.result.current.fetchNextPage()); + act(() => hook.rerender()); + const { flattenData } = hook.result.current as { + flattenData: { name: string }[]; + }; + expect(new Set(flattenData.map((data) => data.name)).size).toEqual( + flattenData.length, + ); + expect(flattenData.length).toEqual(20); + }); + it('should return hasNextPage with true, it rests 16 items to display', async () => { - const result: any = renderUseResourcesV6Hook(); + const { result } = renderUseResourcesV6Hook(); const { hasNextPage } = result.current; expect(hasNextPage).toBeTruthy(); }); it('should return pageIndex with 0 at the launch of the hook', async () => { - const result: any = renderUseResourcesV6Hook(); + const { result } = renderUseResourcesV6Hook(); const { pageIndex } = result.current; expect(pageIndex).toEqual(0); }); it('should return totalCount with 26', async () => { - const result: any = renderUseResourcesV6Hook(); + const { result } = renderUseResourcesV6Hook(); const { totalCount } = result.current; expect(totalCount).toEqual(26); }); diff --git a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx index 52415e813422..30364230937b 100644 --- a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx +++ b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx @@ -11,7 +11,7 @@ export interface ColumnDatagrid { type: string; } -interface ResourcesV6Hook { +export interface ResourcesV6Hook { queryKey: string[]; columns?: ColumnDatagrid[]; } diff --git a/packages/manager-react-components/src/hooks/date/useFormattedDate.spec.tsx b/packages/manager-react-components/src/hooks/date/useFormattedDate.spec.tsx index a7005c95da05..6377dc696c9a 100644 --- a/packages/manager-react-components/src/hooks/date/useFormattedDate.spec.tsx +++ b/packages/manager-react-components/src/hooks/date/useFormattedDate.spec.tsx @@ -1,11 +1,12 @@ import { renderHook } from '@testing-library/react'; +import { vitest } from 'vitest'; import { useFormattedDate, defaultUnknownDateLabel, DateFormat, } from './useFormattedDate'; -jest.mock('react-i18next', () => ({ +vitest.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key, i18n: { diff --git a/packages/manager-react-components/src/hooks/date/useFormattedDateEnglish.spec.tsx b/packages/manager-react-components/src/hooks/date/useFormattedDateEnglish.spec.tsx index e740276da7c0..f0692fce16e5 100644 --- a/packages/manager-react-components/src/hooks/date/useFormattedDateEnglish.spec.tsx +++ b/packages/manager-react-components/src/hooks/date/useFormattedDateEnglish.spec.tsx @@ -1,11 +1,12 @@ import { renderHook } from '@testing-library/react'; +import { vitest } from 'vitest'; import { useFormattedDate, defaultUnknownDateLabel, DateFormat, } from './useFormattedDate'; -jest.mock('react-i18next', () => ({ +vitest.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key, i18n: { diff --git a/packages/manager-react-components/src/hooks/pci/useMaintenance.spec.tsx b/packages/manager-react-components/src/hooks/pci/useMaintenance.spec.tsx index 219f5e636473..50c4f9be057a 100644 --- a/packages/manager-react-components/src/hooks/pci/useMaintenance.spec.tsx +++ b/packages/manager-react-components/src/hooks/pci/useMaintenance.spec.tsx @@ -3,6 +3,8 @@ import { QueryClientProvider, UseQueryResult, } from '@tanstack/react-query'; +import { vitest } from 'vitest'; +import React from 'react'; import { renderHook } from '@testing-library/react'; import { useProductMaintenance } from './useMaintenance'; import * as useMigrationSteins from './useMigrationSteins'; @@ -10,11 +12,12 @@ import * as useAggregatedPrivateNetworks from './useAggregatedPrivateNetworks'; import * as useProjectRegions from './useProjectRegions'; import { Stein } from './useMigrationSteins'; import { Region } from './useProjectRegions'; +import '@testing-library/jest-dom'; const renderUseMaintenanceHook = () => { const queryClient = new QueryClient(); - const wrapper = ({ children }) => ( + const wrapper = ({ children }: React.PropsWithChildren) => ( {children} ); @@ -27,9 +30,20 @@ const renderUseMaintenanceHook = () => { describe('useMaintenance', () => { it('should return hasMaintenance with false value when useMigrationSteins return empty array', async () => { - jest.spyOn(useMigrationSteins, 'useMigrationSteins').mockReturnValue({ + vitest.spyOn(useMigrationSteins, 'useMigrationSteins').mockReturnValue({ data: [], } as UseQueryResult); + vitest.spyOn(useProjectRegions, 'useProjectRegions').mockReturnValue({ + data: [], + } as UseQueryResult); + vitest + .spyOn( + useAggregatedPrivateNetworks, + 'useAggregatedPrivateNetworksRegions', + ) + .mockReturnValue({ + data: [], + } as UseQueryResult); const result = renderUseMaintenanceHook(); @@ -50,11 +64,11 @@ describe('useMaintenance', () => { }, ]; - jest.spyOn(useMigrationSteins, 'useMigrationSteins').mockReturnValue({ + vitest.spyOn(useMigrationSteins, 'useMigrationSteins').mockReturnValue({ data: mockSteins, } as UseQueryResult); - jest + vitest .spyOn( useAggregatedPrivateNetworks, 'useAggregatedPrivateNetworksRegions', @@ -79,7 +93,7 @@ describe('useMaintenance', () => { }, ]; - jest.spyOn(useProjectRegions, 'useProjectRegions').mockReturnValue({ + vitest.spyOn(useProjectRegions, 'useProjectRegions').mockReturnValue({ data: mockedCustomRegions, } as UseQueryResult); @@ -96,13 +110,13 @@ describe('useMaintenance', () => { }, ]; - jest.spyOn(useMigrationSteins, 'useMigrationSteins').mockReturnValue({ + vitest.spyOn(useMigrationSteins, 'useMigrationSteins').mockReturnValue({ data: mockSteins, } as UseQueryResult); const mockedProjectRegions = ['REGION-1', 'REGION-2']; - jest + vitest .spyOn( useAggregatedPrivateNetworks, 'useAggregatedPrivateNetworksRegions', diff --git a/packages/manager-react-components/src/hooks/region/useTranslatedMicroRegions.spec.tsx b/packages/manager-react-components/src/hooks/region/useTranslatedMicroRegions.spec.tsx index 33a9acf7df42..fe9199e1039a 100644 --- a/packages/manager-react-components/src/hooks/region/useTranslatedMicroRegions.spec.tsx +++ b/packages/manager-react-components/src/hooks/region/useTranslatedMicroRegions.spec.tsx @@ -1,3 +1,4 @@ +import { vitest } from 'vitest'; import { renderHook } from '@testing-library/react'; import { getMacroRegion, @@ -5,7 +6,7 @@ import { useTranslatedMicroRegions, } from './useTranslatedMicroRegions'; -jest.mock('react-i18next', () => ({ +vitest.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key, i18n: { exists: () => true }, diff --git a/packages/manager-react-components/tsconfig.json b/packages/manager-react-components/tsconfig.json index 7dd153f30550..a9c9f2ceec7b 100644 --- a/packages/manager-react-components/tsconfig.json +++ b/packages/manager-react-components/tsconfig.json @@ -1,22 +1,28 @@ { "compilerOptions": { - "lib": ["dom", "es2020"], - "target": "ES2020", - "types": ["vite/client", "node", "jest"], - "module": "ESNext", + "lib": ["dom", "es2021"], + "noEmit": true, + "target": "es2020", + "types": ["vite/client", "node"], + "module": "ES2020", + "moduleResolution": "node", + "removeComments": true, "outDir": "dist", - "allowJs": false, - "resolveJsonModule": true, - "skipLibCheck": true, "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "moduleResolution": "Node", "isolatedModules": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "noImplicitAny": true, "declaration": true, - "declarationDir": "./dist/types", - "jsx": "react-jsx" + "resolveJsonModule": true, + "allowJs": true, + "jsx": "react", + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"], + "@playwright-helpers/*": ["../../../../playwright-helpers/*"] + } }, - "files": ["global.d.ts"], - "include": ["src/**/*", "*.spec.tsx"], - "exclude": ["./src/**/*.stories.*"] + "include": ["src"], + "exclude": ["node_modules", "dist", "types"] } diff --git a/packages/manager-react-components/vite.config.mjs b/packages/manager-react-components/vite.config.mjs new file mode 100644 index 000000000000..f33ab6dc98cd --- /dev/null +++ b/packages/manager-react-components/vite.config.mjs @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import { getBaseConfig } from '@ovh-ux/manager-vite-config'; +import { resolve } from 'path'; + +export default defineConfig({ + ...getBaseConfig(), + root: resolve(process.cwd()), +}); diff --git a/packages/manager-react-components/vite.config.ts b/packages/manager-react-components/vite.config.ts deleted file mode 100644 index 9696043266fa..000000000000 --- a/packages/manager-react-components/vite.config.ts +++ /dev/null @@ -1,29 +0,0 @@ -import react from '@vitejs/plugin-react'; -import { defineConfig } from 'vitest/config'; -import dts from 'vite-plugin-dts'; -import tailwindcss from 'tailwindcss'; -import { UserConfigExport } from 'vite'; -import { getBaseConfig } from '@ovh-ux/manager-vite-config'; - -const app = async (): Promise => { - return defineConfig({ - ...getBaseConfig, - plugins: [ - react(), - dts({ - insertTypesEntry: true, - }), - ], - css: { - postcss: { - plugins: [tailwindcss], - }, - }, - test: { - globals: true, - environment: 'jsdom', - }, - }); -}; - -export default app; diff --git a/packages/manager-react-components/vitest.config.js b/packages/manager-react-components/vitest.config.js new file mode 100644 index 000000000000..6965b7ba385d --- /dev/null +++ b/packages/manager-react-components/vitest.config.js @@ -0,0 +1,33 @@ +import path from 'path'; +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + test: { + globals: true, + environment: 'jsdom', + setupFiles: [], + coverage: { + include: ['src'], + exclude: [], + }, + testTimeout: 60000, + fileParallelism: false, + maxWorkers: 1, + pollOptions: { + forks: { + singleFork: true, + }, + threads: { + singleThread: true, + }, + }, + }, + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + }, + mainFields: ['module'], + }, +});