@lumx/react 3.19.1-alpha.1 → 3.19.1-alpha.11

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.19.1-alpha.1",
-        "@lumx/icons": "^3.19.1-alpha.1",
+        "@lumx/core": "^3.19.1-alpha.11",
+        "@lumx/icons": "^3.19.1-alpha.11",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -33,20 +33,18 @@
         "@storybook/addon-a11y": "^9.1.4",
         "@storybook/addon-docs": "^9.1.4",
         "@storybook/react-vite": "^9.1.4",
-        "@testing-library/dom": "^9.3.4",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
         "@types/dom-view-transitions": "^1.0.5",
-        "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
         "@types/react-is": "^17.0.2",
+        "@vitest/ui": "^1.0.0",
         "autoprefixer": "^9.7.4",
-        "babel-jest": "29.1.2",
         "babel-loader": "^8.0.6",
         "chromatic": "^13.1.4",
         "core-js": "^3.6.4",
@@ -54,8 +52,7 @@
         "glob": "^7.1.6",
         "install-peers-cli": "^2.2.0",
         "is-ci": "^2.0.0",
-        "jest": "29.1.2",
-        "jest-environment-jsdom": "29.1.2",
+        "jsdom": "^27.2.0",
         "node-notifier": "^10.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -70,6 +67,7 @@
         "typescript": "^5.4.3",
         "vite": "^6.3.5",
         "vite-tsconfig-paths": "^5.1.4",
+        "vitest": "^1.0.0",
         "yargs": "^15.4.1"
     },
     "peerDependencies": {
@@ -100,10 +98,10 @@
     "scripts": {
         "build": "rollup -c",
         "prepare": "install-peers || exit 0",
-        "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
+        "test": "vitest run",
         "start:storybook": "storybook dev -p 9000",
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.19.1-alpha.1"
+    "version": "3.19.1-alpha.11"
 }

package/src/components/alert-dialog/AlertDialog.test.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+import { vi } from 'vitest';
 import { AlertDialog, AlertDialogProps } from './AlertDialog';
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 const CLASSNAME = AlertDialog.className as string;
 
@@ -17,7 +18,7 @@ const setup = (propsOverride: Partial<AlertDialogProps> = {}) => {
         title: 'Alert',
         isOpen: true,
         description: 'Deserunt et sunt qui consequat sint sit.',
-        confirmProps: { onClick: jest.fn(), label: 'OK' },
+        confirmProps: { onClick: vi.fn(), label: 'OK' },
         ...propsOverride,
     };
     render(<AlertDialog {...props} />);

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -53,7 +53,7 @@ describe(`<${Autocomplete.displayName}>`, () => {
     describe('Events', () => {
         it('should trigger the onChange callback when there is a change on the Text Field', async () => {
             const name = 'autocomplete-name';
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { inputNative } = setup({
                 name,
                 onChange,
@@ -68,8 +68,8 @@ describe(`<${Autocomplete.displayName}>`, () => {
         });
 
         it('should trigger the onFocus/onBlur callback when the text field is focused and blurred', async () => {
-            const onFocus = jest.fn();
-            const onBlur = jest.fn();
+            const onFocus = vi.fn();
+            const onBlur = vi.fn();
             const { inputNative } = setup({
                 onFocus,
                 onBlur,

package/src/components/button/Button.test.tsx

@@ -68,7 +68,7 @@ describe(`<${Button.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({ children: 'Label', disabled: true, onClick });
             expect(button).toHaveAttribute('disabled');
             await userEvent.click(button);
@@ -76,7 +76,7 @@ describe(`<${Button.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
             expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(button).toHaveAttribute('aria-disabled', 'true');
@@ -87,7 +87,7 @@ describe(`<${Button.displayName}>`, () => {
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({ children: 'Label', 'aria-disabled': true, onClick });
             expect(button).toHaveAttribute('aria-disabled');
             await userEvent.click(button);
@@ -95,7 +95,7 @@ describe(`<${Button.displayName}>`, () => {
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/checkbox/Checkbox.test.tsx

@@ -98,7 +98,7 @@ describe(`<${Checkbox.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when checkbox is clicked', async () => {
             const value = 'value';
@@ -114,7 +114,7 @@ describe(`<${Checkbox.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { checkbox, input } = setup({ isDisabled: true, onChange });
 
             expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
@@ -126,7 +126,7 @@ describe(`<${Checkbox.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { checkbox, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');

package/src/components/chip/Chip.test.tsx

@@ -42,7 +42,7 @@ describe('<Chip />', () => {
         });
 
         it('should render clickable', () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Chip text', onClick });
             expect(chip).toHaveAttribute('role', 'button');
             expect(chip.className).toMatchInlineSnapshot(
@@ -70,11 +70,13 @@ describe('<Chip />', () => {
     });
 
     describe('Events', () => {
-        const onClick = jest.fn();
-        const onAfterClick = jest.fn();
-        const onBeforeClick = jest.fn();
+        const onClick = vi.fn();
+        const onAfterClick = vi.fn();
+        const onBeforeClick = vi.fn();
 
-        beforeEach(jest.clearAllMocks);
+        beforeEach(() => {
+            vi.clearAllMocks();
+        });
 
         it('should trigger onBeforeClick only when clicking on the "before" element', async () => {
             const { after, before, chip } = setup({
@@ -88,12 +90,12 @@ describe('<Chip />', () => {
             await userEvent.click(chip);
             expect(onBeforeClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(after as any);
             expect(onBeforeClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(before as any);
             expect(onBeforeClick).toHaveBeenCalled();
@@ -111,12 +113,12 @@ describe('<Chip />', () => {
             await userEvent.click(chip);
             expect(onClick).toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(after as any);
             expect(onClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(before as any);
             expect(onClick).not.toHaveBeenCalled();
@@ -134,12 +136,12 @@ describe('<Chip />', () => {
             await userEvent.click(chip);
             expect(onAfterClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(after as any);
             expect(onAfterClick).toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(before as any);
             expect(onAfterClick).not.toHaveBeenCalled();
@@ -162,7 +164,7 @@ describe('<Chip />', () => {
         });
 
         it('should forward key down event', async () => {
-            const onKeyDown = jest.fn();
+            const onKeyDown = vi.fn();
             const { chip } = setup({ onClick, onKeyDown });
 
             fireEvent.keyDown(chip, { key: 'A', code: 'KeyA' });
@@ -171,7 +173,7 @@ describe('<Chip />', () => {
 
         it('should forward key down event and trigger `onClick` when pressing Enter', async () => {
             const user = userEvent.setup();
-            const onKeyDown = jest.fn();
+            const onKeyDown = vi.fn();
             const { chip } = setup({ onClick, onKeyDown });
 
             await user.tab();
@@ -187,7 +189,7 @@ describe('<Chip />', () => {
 
     describe('Disabled state', () => {
         it('should render disabled chip button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(chip).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(chip);
@@ -195,7 +197,7 @@ describe('<Chip />', () => {
         });
 
         it('should render disabled chip link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
             // Disabled link should not have an href.
             expect(chip).not.toHaveAttribute('href');
@@ -205,7 +207,7 @@ describe('<Chip />', () => {
         });
 
         it('should render aria-disabled chip button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Label', 'aria-disabled': true, onClick });
             expect(chip).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(chip);
@@ -214,7 +216,7 @@ describe('<Chip />', () => {
         });
 
         it('should render aria-disabled chip link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/date-picker/DatePicker.test.tsx

@@ -9,15 +9,15 @@ import { DatePicker } from '.';
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
 const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
     const props: DatePickerProps = {
         locale: 'fr',
-        onChange: jest.fn(),
+        onChange: vi.fn(),
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -10,8 +10,8 @@ import { DatePickerControlled, DatePickerControlledProps } from './DatePickerCon
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
@@ -20,14 +20,14 @@ type SetupProps = Partial<DatePickerControlledProps>;
 const setup = (propsOverride: SetupProps = {}) => {
     const props: DatePickerControlledProps = {
         locale: 'fr',
-        onChange: jest.fn(),
-        onNextMonthChange: jest.fn(),
-        onPrevMonthChange: jest.fn(),
+        onChange: vi.fn(),
+        onNextMonthChange: vi.fn(),
+        onPrevMonthChange: vi.fn(),
         selectedMonth: mockedDate,
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },
-        onMonthChange: jest.fn(),
+        onMonthChange: vi.fn(),
         ...propsOverride,
     };
     render(<DatePickerControlled {...props} />);

package/src/components/date-picker/DatePickerField.test.tsx

@@ -10,8 +10,8 @@ import { DatePickerField, DatePickerFieldProps } from './DatePickerField';
 import { CLASSNAME } from './constants';
 
 const mockedDate = new Date(1487721600000);
-Date.now = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
     getYearDisplayName: () => 'année',
 }));
 
@@ -19,7 +19,7 @@ const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: S
     const props: DatePickerFieldProps = {
         label: 'DatePickerField',
         locale: 'fr',
-        onChange: jest.fn(),
+        onChange: vi.fn(),
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },

package/src/components/dialog/Dialog.test.tsx

@@ -51,7 +51,7 @@ describe(`<${Dialog.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose });
 
             await userEvent.keyboard('[Escape]');
@@ -59,7 +59,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing any other key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose });
 
             await userEvent.keyboard('a');
@@ -67,7 +67,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, preventAutoClose: true });
 
             await userEvent.keyboard('[Escape]');
@@ -75,7 +75,7 @@ describe(`<${Dialog.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, preventCloseOnEscape: true });
 
             await userEvent.keyboard('[Escape]');

package/src/components/dropdown/Dropdown.test.tsx

@@ -28,7 +28,7 @@ const setup = (propsOverride: Partial<DropdownProps> = {}) => {
 describe(`<${Dropdown.displayName}>`, () => {
     describe('Events', () => {
         it('should trigger `onClose` when pressing `escape` key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({
                 closeOnEscape: true,
                 onClose,
@@ -40,7 +40,7 @@ describe(`<${Dropdown.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing any other key', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, closeOnEscape: true });
 
             await userEvent.keyboard('a');
@@ -48,7 +48,7 @@ describe(`<${Dropdown.displayName}>`, () => {
         });
 
         it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', async () => {
-            const onClose = jest.fn();
+            const onClose = vi.fn();
             setup({ isOpen: true, onClose, closeOnEscape: false });
 
             await userEvent.keyboard('[Escape]');

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -1,3 +1,4 @@
+import { Mock } from 'vitest';
 import React from 'react';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
@@ -11,7 +12,7 @@ import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
 
 const mockChildrenContent = 'children content';
 
@@ -55,7 +56,7 @@ const setup = (
 };
 
 describe(`<${ExpansionPanel.displayName}>`, () => {
-    (isFocusVisible as jest.Mock).mockReturnValue(false);
+    (isFocusVisible as Mock).mockReturnValue(false);
 
     describe('Render', () => {
         it('should render default', () => {
@@ -100,9 +101,9 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onOpen = jest.fn();
-        const onClose = jest.fn();
-        const onToggleOpen = jest.fn();
+        const onOpen = vi.fn();
+        const onClose = vi.fn();
+        const onToggleOpen = vi.fn();
 
         beforeEach(onOpen.mockClear);
         beforeEach(onClose.mockClear);

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, within, screen } from '@testing-library/react';
+import { render, within, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
@@ -18,8 +18,8 @@ import Meta, {
     WithMosaicTrigger,
 } from './ImageLightbox.stories';
 
-jest.mock('@lumx/react/hooks/useImageSize');
-jest.mock('@lumx/react/hooks/useSizeOnWindowResize');
+vi.mock('@lumx/react/hooks/useImageSize');
+vi.mock('@lumx/react/hooks/useSizeOnWindowResize');
 
 const CLASSNAME = ImageLightbox.className as string;
 const baseProps = Meta.args;
@@ -56,7 +56,7 @@ const queries = {
 describe(`<${ImageLightbox.displayName}>`, () => {
     beforeEach(() => {
         (useImageSize as any).mockReturnValue(null);
-        (useSizeOnWindowResize as any).mockReturnValue([null, jest.fn()]);
+        (useSizeOnWindowResize as any).mockReturnValue([null, vi.fn()]);
     });
 
     describe('render', () => {
@@ -159,7 +159,9 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            expect(imageLightbox).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(imageLightbox).not.toBeInTheDocument();
+            });
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -185,7 +187,9 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            expect(imageLightbox).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(imageLightbox).not.toBeInTheDocument();
+            });
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -196,7 +200,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
         const scrollAreaSize = { width: 600, height: 600 };
         beforeEach(() => {
             (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
+            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, vi.fn()]);
         });
 
         it('should use the image initial size', () => {

package/src/components/link/Link.test.tsx

@@ -51,7 +51,7 @@ describe(`<${Link.displayName}>`, () => {
 
         it('should render a button', () => {
             const name = 'Link';
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ onClick, children: name });
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
@@ -75,7 +75,7 @@ describe(`<${Link.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
@@ -83,7 +83,7 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
             expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled');
@@ -94,7 +94,7 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
             expect(screen.queryByRole('button')).toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled', 'true');
@@ -104,7 +104,7 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/list/ListItem.test.tsx

@@ -29,7 +29,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render as a button', () => {
-            setup({ children: 'Label', onItemSelected: jest.fn() });
+            setup({ children: 'Label', onItemSelected: vi.fn() });
             expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
         });
 
@@ -41,29 +41,30 @@ describe(`<${ListItem.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled list item button', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
-            expect(link).toBeDisabled();
+            expect(link).toHaveAttribute('aria-disabled', 'true');
             // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
             if (link) await userEvent.click(link);
             expect(onItemSelected).not.toHaveBeenCalled();
         });
 
         it('should render disabled list item link', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 isDisabled: true,
                 linkProps: { href: 'https://example.com' },
                 onItemSelected,
             });
+            expect(link).not.toHaveAttribute('href');
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
             expect(onItemSelected).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled list item button', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
@@ -71,13 +72,14 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item link', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,
                 linkProps: { href: 'https://example.com' },
                 onItemSelected,
             });
+            expect(link).not.toHaveAttribute('href');
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
             expect(onItemSelected).not.toHaveBeenCalled();