@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.21

package/src/components/navigation/Navigation.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getAllByClassName, getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/navigation/Navigation.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';

package/src/components/navigation/NavigationItem.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/navigation/NavigationItem.tsx

@@ -1,11 +1,12 @@
-import React, { ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -16,9 +17,6 @@ type BaseNavigationItemProps = {
     isCurrentPage?: boolean;
 };
 
-/** Make `href` required when `as` is `a` */
-type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
-
 /**
  * Navigation item props
  */
@@ -26,7 +24,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    RequiredLinkHref<E>;
+    HasRequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -44,8 +42,6 @@ export const NavigationItem = Object.assign(
         const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
-        const buttonProps = Element === 'button' ? { type: 'button' } : {};
-
         return (
             <li
                 className={classNames(
@@ -57,14 +53,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <Element
+                    <RawClickable
+                        as={Element}
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
-                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -74,7 +70,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </Element>
+                    </RawClickable>
                 </Tooltip>
             </li>
         );

package/src/components/navigation/NavigationSection.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, RenderWrapper } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/navigation/NavigationSection.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext } from 'react';
+import { useRef, useState, useContext } from 'react';
 
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
@@ -9,6 +9,7 @@ import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -52,7 +53,8 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
             )}
             ref={ref}
         >
-            <button
+            <RawClickable<'button'>
+                as="button"
                 {...forwardedProps}
                 aria-controls={sectionId}
                 aria-expanded={isOpen}
@@ -62,7 +64,6 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     setIsOpen(!isOpen);
                     event.stopPropagation();
                 }}
-                type="button"
             >
                 {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
@@ -73,7 +74,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
                     icon={isOpen ? mdiChevronUp : mdiChevronDown}
                 />
-            </button>
+            </RawClickable>
             {isOpen &&
                 (isDropdown ? (
                     <Popover

package/src/components/notification/Notification.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Kind } from '@lumx/react';
 import { render, within, screen } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -44,8 +42,8 @@ describe(`<${Notification.displayName}>`, () => {
     });
 
     it('should render content & action', async () => {
-        const onClick = jest.fn();
-        const onActionClick = jest.fn();
+        const onClick = vi.fn();
+        const onActionClick = vi.fn();
         const content = 'Content';
         const actionLabel = 'actionLabel';
         const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
@@ -81,8 +79,9 @@ describe(`<${Notification.displayName}>`, () => {
 
     it('should forward styles', () => {
         const { notification } = setup({ style: { color: 'red' } });
+
         expect(notification).toBeInTheDocument();
-        expect(notification).toHaveStyle('color: red');
+        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
     });
 
     // Common tests suite.

package/src/components/notification/Notification.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';

package/src/components/popover/Popover.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';

package/src/components/popover/Popover.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, RefObject, useRef } from 'react';
+import { ReactNode, RefObject, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/popover/usePopoverStyle.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -6,7 +5,7 @@ import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
 import { PopoverDialog } from './PopoverDialog';
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
 
 describe(`<${PopoverDialog.displayName}>`, () => {
     it('should open and init focus', async () => {

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';

package/src/components/post-block/PostBlock.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/post-block/PostBlock.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isObject from 'lodash/isObject';

package/src/components/progress/Progress.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ProgressCircular, ProgressCircularSize, Size, Text } from '@lumx/react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';

package/src/components/progress/ProgressCircular.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';

package/src/components/progress/ProgressCircular.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Theme, Size } from '@lumx/react';

package/src/components/progress/ProgressLinear.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';

package/src/components/progress/ProgressLinear.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';

package/src/components/progress-tracker/ProgressTracker.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@lumx/react';
 import cloneDeep from 'lodash/cloneDeep';
 import set from 'lodash/set';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default { title: 'LumX components/progress-tracker/Progress Tracker' };
 

package/src/components/progress-tracker/ProgressTracker.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ProgressTrackerStep } from '@lumx/react';
 import { render, within } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/progress-tracker/ProgressTrackerProvider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
     ProgressTracker,
     ProgressTrackerProvider,

package/src/components/progress-tracker/ProgressTrackerProvider.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useReducer } from 'react';
+import { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from '../tabs/state';
 
 export interface ProgressTrackerProviderProps {

package/src/components/progress-tracker/ProgressTrackerStep.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -1,4 +1,4 @@
-import React, { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';

package/src/components/radio-button/RadioButton.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
@@ -86,7 +84,7 @@ describe(`<${RadioButton.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when radioButton is clicked', async () => {
             const value = 'value';
@@ -102,7 +100,7 @@ describe(`<${RadioButton.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { radioButton, input } = setup({ isDisabled: true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
@@ -115,7 +113,7 @@ describe(`<${RadioButton.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { radioButton, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');

package/src/components/radio-button/RadioButton.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+import { ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/radio-button/RadioGroup.stories.tsx

@@ -1,5 +1,5 @@
 import { RadioButton, RadioGroup } from '@lumx/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default { title: 'LumX components/radio-button/Radio Group' };
 

package/src/components/radio-button/RadioGroup.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';

package/src/components/radio-button/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/select/Select.stories.tsx

@@ -3,7 +3,7 @@ import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
 import range from 'lodash/range';
-import React, { SyntheticEvent, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default {

package/src/components/select/Select.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Mock } from 'vitest';
 import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
@@ -13,8 +12,8 @@ import { Select, SelectProps, SelectVariant } from './Select';
 
 const CLASSNAME = Select.className as string;
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -35,7 +34,7 @@ const setup = (propsOverride: Partial<SelectProps> = {}, { wrapper }: SetupRende
 };
 
 describe(`<${Select.displayName}>`, () => {
-    (isFocusVisible as jest.Mock).mockReturnValue(false);
+    (isFocusVisible as Mock).mockReturnValue(false);
 
     describe('Props', () => {
         it('should have default classNames', () => {
@@ -144,7 +143,7 @@ describe(`<${Select.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onDropdownClose` on escape', async () => {
-            const onDropdownClose = jest.fn();
+            const onDropdownClose = vi.fn();
             const { getDropdown } = setup({ isOpen: true, onDropdownClose });
 
             const dropdown = getDropdown();
@@ -156,7 +155,7 @@ describe(`<${Select.displayName}>`, () => {
 
         describe('should trigger `onInputClick` when the select button is clicked', () => {
             it('with input variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { inputWrapper } = setup({ onInputClick: onClick, variant: SelectVariant.input });
 
                 await userEvent.click(inputWrapper as any);
@@ -164,7 +163,7 @@ describe(`<${Select.displayName}>`, () => {
             });
 
             it('with chip variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { chip } = setup({ onInputClick: onClick, variant: SelectVariant.chip });
 
                 await userEvent.click(chip as any);
@@ -174,7 +173,7 @@ describe(`<${Select.displayName}>`, () => {
 
         it('should call onClear when clear icon is clicked in select input', async () => {
             const value = 'Value';
-            const onClear = jest.fn();
+            const onClear = vi.fn();
             const { select, props } = setup({ value, onClear, clearButtonProps: { label: 'Clear' } });
 
             const clearButton = within(select).getByRole('button', { name: props.clearButtonProps?.label });

package/src/components/select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import { RefObject } from 'react';
 
 import classNames from 'classnames';
 import lodashIsEmpty from 'lodash/isEmpty';

package/src/components/select/SelectMultiple.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
+import { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };

package/src/components/select/SelectMultiple.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
@@ -18,7 +16,7 @@ import { SelectVariant } from './constants';
 
 const CLASSNAME = SelectMultiple.className as string;
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -144,7 +142,7 @@ describe('<SelectMultiple>', () => {
     describe('Events', () => {
         describe('should trigger `onInputClick` when the select button is clicked', () => {
             it('with input variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { inputWrapper } = setup({ onInputClick: onClick, variant: SelectVariant.input });
 
                 await userEvent.click(inputWrapper as any);
@@ -152,7 +150,7 @@ describe('<SelectMultiple>', () => {
             });
 
             it('with chip variant', async () => {
-                const onClick = jest.fn();
+                const onClick = vi.fn();
                 const { chip } = setup({ onInputClick: onClick, variant: SelectVariant.chip });
 
                 await userEvent.click(chip as any);
@@ -161,7 +159,7 @@ describe('<SelectMultiple>', () => {
         });
 
         it('should call onClear when an item is clicked with the correct value', async () => {
-            const onClear = jest.fn();
+            const onClear = vi.fn();
             const { valueChips } = setup({
                 onClear,
                 value: ['val 1', 'val 2'],
@@ -184,7 +182,7 @@ describe('<SelectMultiple>', () => {
             const value1 = 'Value 1';
             const value2 = 'Value 2';
 
-            const onClear = jest.fn();
+            const onClear = vi.fn();
             const { chip } = setup({
                 onClear,
                 value: [value1, value2],

package/src/components/select/SelectMultiple.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
+import { ReactNode, RefObject, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/select/WithSelectContext.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { Ref, useCallback, useRef } from 'react';
+import { Ref, useCallback, useRef } from 'react';
 
 import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/core/js/constants';

package/src/components/select/constants.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import React, { ReactNode, SyntheticEvent } from 'react';
+import { ReactNode, SyntheticEvent } from 'react';
 
 /**
  * Select variants.

package/src/components/side-navigation/SideNavigation.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/side-navigation/SideNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactNode } from 'react';
+import { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getAllByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
@@ -10,7 +8,7 @@ const CLASSNAME = SideNavigationItem.className as string;
 
 const toggleButtonProps = { label: 'Toggle' };
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -106,7 +104,7 @@ describe(`<${SideNavigationItem.displayName}>`, () => {
 
     describe('children and link', () => {
         it('should render with children and link', () => {
-            const onActionClick = jest.fn();
+            const onActionClick = vi.fn();
             const label = 'Side navigation item';
             const { props, toggle, link } = setup({
                 label,