@wordpress/components 40.0.0 → 40.1.0

package/src/item-group/types.ts

@@ -45,6 +45,10 @@ export interface ItemProps {
 }
 
 export type ItemGroupContext = {
+	/**
+	 * Whether items should use list semantics.
+	 */
+	isList: boolean;
 	/**
 	 * When true, each `Item` will be styled as an individual item (e.g. with rounded
 	 * borders), instead of being part of the same UI block with the rest of the items.

package/src/keyboard-shortcuts/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { createEvent, fireEvent, render, screen } from '@testing-library/react';
 import KeyboardShortcuts from '..';
 
@@ -22,7 +23,7 @@ describe( 'KeyboardShortcuts', () => {
 	}
 
 	it( 'should capture key events', async () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<KeyboardShortcuts
@@ -38,7 +39,7 @@ describe( 'KeyboardShortcuts', () => {
 	} );
 
 	it( 'should capture key events globally', () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<div>
@@ -58,7 +59,7 @@ describe( 'KeyboardShortcuts', () => {
 	} );
 
 	it( 'should capture key events on specific event', () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<div>
@@ -78,7 +79,7 @@ describe( 'KeyboardShortcuts', () => {
 	} );
 
 	it( 'should capture key events on children', () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<div>

package/src/menu/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,18 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import { Menu } from '..';
 import Modal from '../../modal';
+globalThis.wpVitest.mockCSSSupports();
+globalThis.wpVitest.mockScrollIntoView();
+globalThis.wpVitest.mockVisibleElements();
 
 const waitForFocusedMenu = () =>
 	waitFor( () => expect( screen.getByRole( 'menu' ) ).toHaveFocus() );
@@ -30,7 +40,7 @@ const isBodyScrollLocked = () =>
 	document.body.classList.contains( 'modal-open' );
 
 const resetTypeahead = () => {
-	act( () => jest.advanceTimersByTime( 500 ) );
+	act( () => vi.advanceTimersByTime( 500 ) );
 };
 
 const MenuWithModal = ( { nested = false }: { nested?: boolean } ) => {
@@ -443,7 +453,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should use a `hideOnClick` callback to decide whether to close', async () => {
-			const hideOnClick = jest.fn( () => false );
+			const hideOnClick = vi.fn( () => false );
 			render(
 				<Menu defaultOpen>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -462,7 +472,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should close when a `hideOnClick` callback returns `true`', async () => {
-			const hideOnClick = jest.fn( () => true );
+			const hideOnClick = vi.fn( () => true );
 			render(
 				<Menu defaultOpen>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -755,7 +765,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check radio items and keep the menu open when clicking (controlled)', async () => {
-			const onRadioValueChangeSpy = jest.fn();
+			const onRadioValueChangeSpy = vi.fn();
 
 			const ControlledRadioGroup = () => {
 				const [ radioValue, setRadioValue ] = useState( 'two' );
@@ -843,7 +853,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => {
-			const onRadioValueChangeSpy = jest.fn();
+			const onRadioValueChangeSpy = vi.fn();
 			render(
 				<Menu>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -923,7 +933,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check checkbox items and keep the menu open when clicking (controlled)', async () => {
-			const onCheckboxValueChangeSpy = jest.fn();
+			const onCheckboxValueChangeSpy = vi.fn();
 
 			const ControlledRadioGroup = () => {
 				const [ itemOneChecked, setItemOneChecked ] =
@@ -1055,7 +1065,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check checkbox items and keep the menu open when clicking (uncontrolled)', async () => {
-			const onCheckboxValueChangeSpy = jest.fn();
+			const onCheckboxValueChangeSpy = vi.fn();
 
 			render(
 				<Menu>
@@ -1239,7 +1249,7 @@ describe( 'Menu', () => {
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the Menu to close.
 			await user.tab();
-			expect( outerButton ).toHaveFocus();
+			await waitFor( () => expect( outerButton ).toHaveFocus() );
 			await waitFor( () =>
 				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
 			);
@@ -1365,15 +1375,8 @@ describe( 'Menu', () => {
 	} );
 
 	describe( 'typeahead', () => {
-		beforeEach( () => {
-			jest.useFakeTimers();
-			user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-		} );
-
 		afterEach( () => {
-			jest.useRealTimers();
+			vi.useRealTimers();
 		} );
 
 		it( 'should highlight matching item', async () => {
@@ -1394,9 +1397,17 @@ describe( 'Menu', () => {
 				} )
 			);
 			await waitForFocusedMenu();
+			vi.useFakeTimers();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await user.keyboard( 'tw' );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), {
+				code: 'KeyT',
+				key: 't',
+			} );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), {
+				code: 'KeyW',
+				key: 'w',
+			} );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();
@@ -1405,7 +1416,18 @@ describe( 'Menu', () => {
 			resetTypeahead();
 
 			// Type "on", it should match and focus the item with content "One"
-			await user.keyboard( 'on' );
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'Two' } ),
+				{
+					key: 'o',
+				}
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'Two' } ),
+				{
+					key: 'n',
+				}
+			);
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1429,16 +1451,20 @@ describe( 'Menu', () => {
 				} )
 			);
 			await waitForFocusedMenu();
+			vi.useFakeTimers();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await user.keyboard( 'abc' );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'a' } );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'b' } );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'c' } );
 			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
 			// Reset the typeahead search so the next keystrokes start a new query.
 			resetTypeahead();
 
 			// Type "on", it should match and focus the item with content "One"
-			await user.keyboard( 'on' );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'o' } );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'n' } );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1447,7 +1473,18 @@ describe( 'Menu', () => {
 			resetTypeahead();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await user.keyboard( 'abc' );
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'a' }
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'b' }
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'c' }
+			);
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1456,7 +1493,14 @@ describe( 'Menu', () => {
 			resetTypeahead();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await user.keyboard( 'tw' );
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 't' }
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'w' }
+			);
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();

package/src/menu-group/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { MenuGroup } from '../';
 

package/src/menu-item/test/__snapshots__/{index.js.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MenuItem should match snapshot when all props provided 1`] = `
+exports[`MenuItem > should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
   class="components-button components-menu-item__button my-class is-compact"
@@ -34,7 +34,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 </button>
 `;
 
-exports[`MenuItem should match snapshot when info is provided 1`] = `
+exports[`MenuItem > should match snapshot when info is provided 1`] = `
 <button
   class="components-button components-menu-item__button is-compact"
   role="menuitem"
@@ -61,7 +61,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 </button>
 `;
 
-exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
+exports[`MenuItem > should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
   class="components-button components-menu-item__button my-class is-compact"
   role="menuitem"
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 </button>
 `;
 
-exports[`MenuItem should match snapshot when only label provided 1`] = `
+exports[`MenuItem > should match snapshot when only label provided 1`] = `
 <button
   class="components-button components-menu-item__button is-compact"
   role="menuitem"

package/src/menu-item/test/{index.js → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { more } from '@wordpress/icons';
 import MenuItem from '../';

package/src/modal/test/{aria-helper.ts → aria-helper.jsdom.test.ts}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { elementShouldBeHidden } from '../aria-helper';
 
 describe( 'aria-helper', () => {

package/src/modal/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useEffect, useState } from '@wordpress/element';
@@ -7,6 +8,9 @@ import {
 } from '@wordpress/ui';
 import Modal from '../';
 import type { ModalProps } from '../types';
+globalThis.wpVitest.mockCSSSupports();
+globalThis.wpVitest.mockMatchMedia();
+globalThis.wpVitest.mockVisibleElements();
 
 const noop = () => {};
 
@@ -72,7 +76,7 @@ describe( 'Modal', () => {
 
 	it( 'should call onRequestClose when the escape key is pressed', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>
 				<p>Modal content</p>
@@ -84,7 +88,7 @@ describe( 'Modal', () => {
 
 	it( 'should stop an Escape key press from propagating when it dismisses the modal', async () => {
 		const user = userEvent.setup();
-		const documentKeyDownHandler = jest.fn();
+		const documentKeyDownHandler = vi.fn();
 		document.addEventListener( 'keydown', documentKeyDownHandler );
 
 		try {
@@ -131,7 +135,7 @@ describe( 'Modal', () => {
 
 	it( 'should request closing of any non nested modal when opened', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 
 		const DismissAdjacent = () => {
 			const [ isShown, setIsShown ] = useState( false );
@@ -156,7 +160,7 @@ describe( 'Modal', () => {
 
 	it( 'should support nested modals', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 
 		const NestSupport = () => {
 			const [ isShown, setIsShown ] = useState( false );
@@ -181,7 +185,7 @@ describe( 'Modal', () => {
 
 	it( 'should request closing of nested modal when outer modal unmounts', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 
 		const RequestCloseOfNested = () => {
 			const [ isShown, setIsShown ] = useState( true );

package/src/navigable-container/test/{navigable-menu.tsx → navigable-menu.jsdom.test.tsx}

@@ -1,7 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { NavigableMenu } from '../menu';
 import type { NavigableMenuProps } from '../types';
+globalThis.wpVitest.mockVisibleElements();
 
 const NavigableMenuTestCase = ( props: NavigableMenuProps ) => (
 	<NavigableMenu { ...props }>
@@ -25,7 +27,7 @@ describe( 'NavigableMenu', () => {
 	it( 'moves focus on its focusable children by using the up/down arrow keys', async () => {
 		const user = userEvent.setup();
 
-		const onNavigateSpy = jest.fn();
+		const onNavigateSpy = vi.fn();
 
 		render( <NavigableMenuTestCase onNavigate={ onNavigateSpy } /> );
 
@@ -64,7 +66,7 @@ describe( 'NavigableMenu', () => {
 	it( 'moves focus on its focusable children by using the left/right arrow keys when the `orientation`prop is set to `horizontal', async () => {
 		const user = userEvent.setup();
 
-		const onNavigateSpy = jest.fn();
+		const onNavigateSpy = vi.fn();
 
 		render(
 			<NavigableMenuTestCase
@@ -108,7 +110,7 @@ describe( 'NavigableMenu', () => {
 	it( 'should stop at the edges when the `cycle` prop is set to `false`', async () => {
 		const user = userEvent.setup();
 
-		const onNavigateSpy = jest.fn();
+		const onNavigateSpy = vi.fn();
 
 		const { rerender } = render(
 			<NavigableMenuTestCase onNavigate={ onNavigateSpy } />
@@ -166,7 +168,7 @@ describe( 'NavigableMenu', () => {
 	it( 'stops keydown event propagation when arrow keys are pressed, regardless of the `orientation` prop', async () => {
 		const user = userEvent.setup();
 
-		const externalWrapperOnKeyDownSpy = jest.fn();
+		const externalWrapperOnKeyDownSpy = vi.fn();
 
 		render(
 			// Disable reason: this is only for test purposes.
@@ -193,7 +195,7 @@ describe( 'NavigableMenu', () => {
 	} );
 
 	it( 'should keep forwarded callback refs stable across rerenders', () => {
-		const refSpy = jest.fn();
+		const refSpy = vi.fn();
 
 		const { rerender } = render(
 			<NavigableMenu ref={ refSpy }>

package/src/navigable-container/test/{tababble-container.tsx → tababble-container.jsdom.test.tsx}

@@ -1,7 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TabbableContainer } from '../tabbable';
 import type { TabbableContainerProps } from '../types';
+globalThis.wpVitest.mockVisibleElements();
 
 const TabbableContainerTestCase = ( props: TabbableContainerProps ) => (
 	<>
@@ -32,7 +34,7 @@ describe( 'TabbableContainer', () => {
 	it( 'moves focus on its tabbable children by using the tab key', async () => {
 		const user = userEvent.setup();
 
-		const onNavigateSpy = jest.fn();
+		const onNavigateSpy = vi.fn();
 
 		render( <TabbableContainerTestCase onNavigate={ onNavigateSpy } /> );
 
@@ -65,7 +67,7 @@ describe( 'TabbableContainer', () => {
 	it( 'should stop at the edges when the `cycle` prop is set to `false`', async () => {
 		const user = userEvent.setup();
 
-		const onNavigateSpy = jest.fn();
+		const onNavigateSpy = vi.fn();
 
 		const { rerender } = render(
 			<TabbableContainerTestCase onNavigate={ onNavigateSpy } />
@@ -137,7 +139,7 @@ describe( 'TabbableContainer', () => {
 	it( 'stops keydown event propagation when the tab key is pressed', async () => {
 		const user = userEvent.setup();
 
-		const externalWrapperOnKeyDownSpy = jest.fn();
+		const externalWrapperOnKeyDownSpy = vi.fn();
 
 		render(
 			// Disable reason: this is only for test purposes.

package/src/navigator/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import type { ComponentPropsWithoutRef } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -6,6 +7,8 @@ import Button from '../../button';
 import { Navigator, useNavigator } from '..';
 import { NavigatorToParentButton } from '../legacy';
 import type { NavigateOptions } from '../types';
+globalThis.wpVitest.mockMatchMedia();
+globalThis.wpVitest.mockVisibleElements();
 
 const INVALID_HTML_ATTRIBUTE = {
 	raw: '/ "\'><=invalid_path',
@@ -497,7 +500,7 @@ describe( 'Navigator', () => {
 	} );
 
 	it( 'should navigate across screens', async () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		const user = userEvent.setup();
 
@@ -567,7 +570,7 @@ describe( 'Navigator', () => {
 	} );
 
 	it( 'should not render anything if the path does not match any available screen', async () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		const user = userEvent.setup();
 

package/src/navigator/test/router.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { patternMatch, findParent } from '../utils/router';
 
 describe( 'patternMatch', () => {

package/src/notice/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Notice should match snapshot 1`] = `
+exports[`Notice > should match snapshot 1`] = `
 <div>
   <div
     class="components-notice is-success"
@@ -48,15 +48,18 @@ exports[`Notice should match snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
+          d="M7.75 16.25L16.25 7.75M16.25 16.25L7.75 7.75"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </button>

package/src/notice/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,10 +1,14 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { speak } from '@wordpress/a11y';
 import Notice from '../index';
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
-const mockedSpeak = jest.mocked( speak );
+vi.mock( import( '@wordpress/a11y' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	speak: vi.fn(),
+} ) );
+const mockedSpeak = vi.mocked( speak );
 
 function getNoticeWrapper( container: HTMLElement ) {
 	return container.firstChild;
@@ -118,7 +122,7 @@ describe( 'Notice', () => {
 					actions={ [
 						{
 							label: 'Disabled action',
-							onClick: jest.fn(),
+							onClick: vi.fn(),
 							disabled: true,
 						},
 					] }
@@ -136,7 +140,7 @@ describe( 'Notice', () => {
 
 		it( 'should call onClick when action with url is clicked', async () => {
 			const user = userEvent.setup();
-			const onClick = jest.fn( ( e ) => e.preventDefault() );
+			const onClick = vi.fn( ( e ) => e.preventDefault() );
 
 			render(
 				<Notice

package/src/notice/test/{list.tsx → list.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import NoticeList from '../list';
 

package/src/number-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,9 +1,12 @@
+import { describe, expect, it, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import _NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const NumberControl = (
 	props: React.ComponentProps< typeof _NumberControl >
 ) => <_NumberControl { ...props } />;
@@ -50,7 +53,7 @@ describe( 'NumberControl', () => {
 	describe( 'onChange handling', () => {
 		it( 'should provide onChange callback with number value', async () => {
 			const user = userEvent.setup();
-			const spy = jest.fn();
+			const spy = vi.fn();
 
 			render(
 				<NumberControl value={ 5 } onChange={ ( v ) => spy( v ) } />
@@ -65,7 +68,7 @@ describe( 'NumberControl', () => {
 
 		it( 'should call onChange callback when value is clamped on blur', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<NumberControl
@@ -108,7 +111,7 @@ describe( 'NumberControl', () => {
 
 		it( 'should call onChange callback when value is not valid', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<NumberControl
@@ -251,7 +254,7 @@ describe( 'NumberControl', () => {
 		it( 'should fire onKeyDown callback', async () => {
 			const user = userEvent.setup();
 
-			const spy = jest.fn();
+			const spy = vi.fn();
 
 			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
 
@@ -404,7 +407,7 @@ describe( 'NumberControl', () => {
 	describe( 'Key DOWN interactions', () => {
 		it( 'should fire onKeyDown callback', async () => {
 			const user = userEvent.setup();
-			const spy = jest.fn();
+			const spy = vi.fn();
 
 			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
 
@@ -587,7 +590,7 @@ describe( 'NumberControl', () => {
 			'should spin %s to %s when props = %o',
 			async ( direction, expectedValue, props ) => {
 				const user = userEvent.setup();
-				const onChange = jest.fn();
+				const onChange = vi.fn();
 				render(
 					<NumberControl
 						{ ...props }