@wordpress/block-editor 17.0.0 → 17.1.0

package/src/components/link-control/test/{url-normalization.test.js → url-normalization.jsdom.test.jsx}

@@ -1,31 +1,32 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SlotFillProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { useReducedMotion } from '@wordpress/compose';
 import LinkControl from '../';
 import { fetchFauxEntitySuggestions } from './fixtures';
 
-const mockFetchSearchSuggestions = jest.fn();
+globalThis.wpVitest.mockMatchMedia();
 
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
-
-useSelect.mockImplementation( () => ( {
-	fetchSearchSuggestions: mockFetchSearchSuggestions,
-} ) );
+const mockFetchSearchSuggestions = vi.fn();
 
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: () => ( { saveEntityRecords: vi.fn() } ),
+	useSelect: vi.fn(),
 } ) );
 
-jest.mock( '@wordpress/compose', () => ( {
-	...jest.requireActual( '@wordpress/compose' ),
-	useReducedMotion: jest.fn( () => true ),
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useReducedMotion: vi.fn( () => true ),
 } ) );
 
 beforeEach( () => {
+	useReducedMotion.mockReturnValue( true );
+	useSelect.mockImplementation( () => ( {
+		fetchSearchSuggestions: mockFetchSearchSuggestions,
+	} ) );
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
 } );
 
@@ -40,7 +41,7 @@ function renderWithProvider( ui ) {
 describe( 'URL normalization consistency', () => {
 	it( 'should normalize bare domain (wordpress.org) to https:// when clicking Apply', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		// Start with existing link to show Apply button
 		renderWithProvider(
@@ -78,7 +79,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should normalize www domain (www.wordpress.org) to https:// when clicking Apply', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		// Start with existing link to show Apply button
 		renderWithProvider(
@@ -116,7 +117,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve explicit http:// protocol', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl
@@ -151,7 +152,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve mailto: links without normalization', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl
@@ -185,7 +186,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve relative paths without normalization', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl
@@ -219,7 +220,7 @@ describe( 'URL normalization consistency', () => {
 
 	it( 'should preserve hash links without normalization', async () => {
 		const user = userEvent.setup();
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		renderWithProvider(
 			<LinkControl

package/src/components/link-picker/test/{index.js → index.jsdom.test.jsx}

@@ -1,27 +1,24 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useSelect } from '@wordpress/data';
+import { useReducedMotion } from '@wordpress/compose';
 import { LinkPicker } from '../';
 
-const mockFetchSearchSuggestions = jest.fn();
+globalThis.wpVitest.mockMatchMedia();
 
-// Mock useSelect for search suggestions
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
-
-useSelect.mockImplementation( () => ( {
-	fetchSearchSuggestions: mockFetchSearchSuggestions,
-} ) );
+const mockFetchSearchSuggestions = vi.fn();
 
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
+// Mock useSelect for search suggestions
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useDispatch: () => ( { saveEntityRecords: vi.fn() } ),
+	useSelect: vi.fn(),
 } ) );
 
-jest.mock( '@wordpress/compose', () => ( {
-	...jest.requireActual( '@wordpress/compose' ),
-	useReducedMotion: jest.fn( () => true ),
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useReducedMotion: vi.fn( () => true ),
 } ) );
 
 // Helper to create mock suggestions
@@ -51,6 +48,10 @@ function createMockPreview( {
 }
 
 beforeEach( () => {
+	useReducedMotion.mockReturnValue( true );
+	useSelect.mockImplementation( () => ( {
+		fetchSearchSuggestions: mockFetchSearchSuggestions,
+	} ) );
 	mockFetchSearchSuggestions.mockImplementation( () =>
 		Promise.resolve( createMockSuggestions() )
 	);
@@ -66,7 +67,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview() }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -85,7 +86,7 @@ describe( 'LinkPicker', () => {
 						url: 'example.com',
 						badges: [],
 					} }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -104,7 +105,7 @@ describe( 'LinkPicker', () => {
 						url: 'example.com',
 						badges: [ { label: 'Page', intent: 'default' } ],
 					} }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -124,7 +125,7 @@ describe( 'LinkPicker', () => {
 						image: 'https://example.com/image.jpg',
 						badges: [ { label: 'Page', intent: 'default' } ],
 					} }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -144,7 +145,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link to"
 				/>
 			);
@@ -156,7 +157,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 					help="Synced with the selected page."
 				/>
@@ -175,7 +176,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -202,7 +203,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -226,7 +227,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -263,7 +264,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 					help="This is help text"
 				/>
@@ -284,7 +285,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview( { url: 'example.com' } ) }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -299,7 +300,7 @@ describe( 'LinkPicker', () => {
 	describe( 'Selection behavior', () => {
 		it( 'should call onSelect with suggestion data when a suggestion is selected', async () => {
 			const user = userEvent.setup();
-			const onSelect = jest.fn();
+			const onSelect = vi.fn();
 
 			render(
 				<LinkPicker
@@ -348,7 +349,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview() }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					label="Link"
 				/>
 			);
@@ -392,7 +393,7 @@ describe( 'LinkPicker', () => {
 			render(
 				<LinkPicker
 					preview={ createMockPreview() }
-					onSelect={ jest.fn() }
+					onSelect={ vi.fn() }
 					suggestionsQuery={ customQuery }
 					label="Link"
 				/>
@@ -423,7 +424,7 @@ describe( 'LinkPicker', () => {
 	describe( 'Integration scenarios', () => {
 		it( 'should handle changing from empty link to entity link', async () => {
 			const user = userEvent.setup();
-			const onSelect = jest.fn();
+			const onSelect = vi.fn();
 
 			render(
 				<LinkPicker

package/src/components/list-view/{block-select-button.js → block-select-button.jsx}

@@ -33,6 +33,7 @@ function ListViewBlockSelectButton(
 		onDragEnd,
 		draggable,
 		isExpanded,
+		isSelected,
 		ariaDescribedBy,
 		visibilityLabel,
 		isDisabled = false,
@@ -129,7 +130,11 @@ function ListViewBlockSelectButton(
 			aria-expanded={ isExpanded }
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
-			<BlockIcon icon={ icon } showColors context="list-view" />
+			<BlockIcon
+				icon={ icon }
+				showColors={ ! isSelected }
+				context="list-view"
+			/>
 			<Stack
 				align="center"
 				className="block-editor-list-view-block-select-button__label-wrapper"

package/src/components/list-view/{block.js → block.jsx}

@@ -431,11 +431,12 @@ function ListViewBlock( {
 	const selectEditorBlock = useCallback(
 		( event ) => {
 			// For keyboard activation (Enter/Space on a link), transfer focus
-			// to the canvas with the caret at the end of the block.
-			// For mouse clicks, keep focus in the list view so that subsequent
-			// keyboard operations (arrow navigation, copy/paste) still work.
+			// to the canvas at the default initial position (start of the first
+			// field). For mouse clicks, keep focus in the list view so that
+			// subsequent keyboard operations (arrow navigation, copy/paste)
+			// still work.
 			const isKeyboardActivation = event?.detail === 0;
-			selectBlock( event, clientId, isKeyboardActivation ? -1 : null );
+			selectBlock( event, clientId, isKeyboardActivation ? 0 : null );
 			event.preventDefault();
 		},
 		[ clientId, selectBlock ]
@@ -655,6 +656,7 @@ function ListViewBlock( {
 							tabIndex={ getListViewBlockTabIndex( tabIndex ) }
 							onFocus={ onFocus }
 							isExpanded={ canEditBlock ? isExpanded : undefined }
+							isSelected={ isSelected }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
 							visibilityLabel={ blockVisibilityDescription }

package/src/components/list-view/style.scss

@@ -31,6 +31,14 @@
 	// when rows later receive the is-displacement-up or is-displacement-down class.
 	transform: translateY(0);
 
+	// The transform above makes each row its own stacking context, so the focus
+	// ring cannot escape it. Lift the focused row above the siblings that would
+	// otherwise paint over it.
+	&:focus-within,
+	&.is-nesting {
+		z-index: 1;
+	}
+
 	&.is-draggable,
 	&.is-draggable .block-editor-list-view-block-contents {
 		cursor: grab;
@@ -49,11 +57,6 @@
 
 		svg {
 			fill: currentColor;
-			// Optimize for high contrast modes.
-			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
-			@media (forced-colors: active) {
-				fill: CanvasText;
-			}
 		}
 	}
 
@@ -81,33 +84,54 @@
 		.block-editor-block-icon {
 			color: var(--wp-block-synced-color);
 		}
-
-		&:focus::after {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-		}
+	}
+	&.is-synced .block-editor-list-view-block-contents:focus::after {
+		--focus-color: var(--wp-block-synced-color);
+	}
+	&.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
+		--focus-color: var(--wp-block-synced-color);
+		@include outset-ring__focus();
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
 		color: $white;
 	}
-	&.is-selected .block-editor-list-view-block-contents:focus {
-		&::after {
-			box-shadow:
-				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wpds-color-stroke-focus);
-		}
+	&.is-selected .block-editor-list-view-block__menu:focus {
+		--focus-color: var(--wpds-color-foreground-interactive-brand-strong);
+		@include outset-ring__focus();
+		outline-offset: calc(-1 * var(--wpds-border-width-focus));
 	}
-	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
-		&::after {
-			box-shadow:
-				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-block-synced-color);
+	@media (forced-colors: active) {
+		&.is-selected td,
+		&.is-selected.is-synced td {
+			background: SelectedItem;
+		}
+
+		&.is-selected .block-editor-list-view-block-contents,
+		&.is-selected .components-button.has-icon {
+			color: SelectedItemText;
+		}
+
+		&.is-selected svg,
+		&.is-selected .block-editor-block-icon.has-colors svg {
+			fill: SelectedItemText;
+		}
+
+		// Prevent backplate with same color as text in dark mode.
+		// Opt-out scoped to only the row title.
+		&.is-selected .block-editor-list-view-block-select-button__title {
+			forced-color-adjust: none;
+		}
+
+		// The row-wide ring sits outside the selected background.
+		&.is-selected .block-editor-list-view-block-contents:focus::after {
+			--focus-color: CanvasText;
+		}
+
+		// The menu ring is inset over the selected background.
+		&.is-selected .block-editor-list-view-block__menu:focus {
+			--focus-color: SelectedItemText;
 		}
-	}
-	&.is-selected .block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
 
 	// Border radius for corners of the selected item.
@@ -261,18 +285,21 @@
 	&.is-nesting .block-editor-list-view-block-contents,
 	.block-editor-list-view-block-contents:focus {
 		box-shadow: none;
+		outline: none;
 
 		&::after {
 			content: "";
 			position: absolute;
 			top: 0;
-			right: -(24px + 5px); // Icon size + padding.
+			right: -(24px + 4px); // Icon size + padding.
 			bottom: 0;
 			left: 0;
 			border-radius: inherit;
+			@include outset-ring__focus();
+			outline-offset: 1px;
 			box-shadow:
-				inset 0 0 0 var(--wp-admin-border-width-focus)
-				var(--wpds-color-stroke-focus);
+				0 0 0 calc(var(--wpds-border-width-focus) + 2px)
+				var(--wpds-color-background-surface-neutral-strong);
 			z-index: 2;
 			pointer-events: none;
 		}
@@ -283,13 +310,6 @@
 		right: 0;
 	}
 
-	&.is-nesting .block-editor-list-view__menu {
-		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus)
-			var(--wpds-color-stroke-focus);
-		z-index: 1;
-	}
-
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
 		@include animation__fade-in;

package/src/components/list-view/test/use-list-view-drop-zone.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getListViewDropTarget,
 	NESTING_LEVEL_INDENTATION,

package/src/components/list-view/test/utils.js

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

package/src/components/list-view/use-list-view-drop-zone.js

@@ -557,7 +557,7 @@ export default function useListViewDropZone( {
 		},
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
-			// handled, so get it now and pass it to the thottled function.
+			// handled, so get it now and pass it to the throttled function.
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget );
 		},

package/src/components/media-placeholder/test/get-computed-accept-attribute.js

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

package/src/components/media-placeholder/test/{index.js → index.jsdom.test.jsx}

@@ -1,8 +1,14 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { MediaPlaceholder } from '../';
 
-jest.mock( '../../media-upload/check', () => () => null );
-jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) );
+vi.mock( import( '../../media-upload/check' ), () => ( {
+	default: () => null,
+} ) );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: () => ( {} ),
+} ) );
 
 describe( 'MediaPlaceholder', () => {
 	it( 'renders successfully when allowedTypes property is not specified', () => {

package/src/components/media-replace-flow/{index.js → index.jsx}

@@ -96,13 +96,18 @@ const MediaReplaceFlow = ( {
 	};
 
 	const selectMedia = ( media, closeMenu ) => {
+		const hasMedia = !! ( mediaURL || mediaId || mediaIds?.length );
 		if ( useFeaturedImage && onToggleFeaturedImage ) {
 			onToggleFeaturedImage();
 		}
 		closeMenu();
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
-		speak( __( 'The media file has been replaced' ) );
+		speak(
+			hasMedia
+				? __( 'The media file has been replaced' )
+				: __( 'The media file has been added' )
+		);
 		removeNotice( errorNoticeID );
 	};
 

package/src/components/media-replace-flow/test/{index.js → index.jsdom.test.jsx}

@@ -1,9 +1,12 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import MediaReplaceFlow from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const noop = () => {};
 
 function TestWrapper() {

package/src/components/navigable-toolbar/{index.js → index.jsx}

@@ -69,6 +69,10 @@ function useIsAccessibleToolbar( toolbarRef ) {
 
 	const determineIsAccessibleToolbar = useCallback( () => {
 		const tabbables = focus.tabbable.find( toolbarRef.current );
+		// A hidden toolbar has no tabbables, so keep its current classification.
+		if ( tabbables.length === 0 ) {
+			return;
+		}
 		const onlyToolbarItem = hasOnlyToolbarItem( tabbables );
 		if ( ! onlyToolbarItem ) {
 			deprecated( 'Using custom components as toolbar controls', {

package/src/components/navigable-toolbar/test/index.browser.test.js

@@ -0,0 +1,50 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { createElement } from '@wordpress/element';
+import NavigableToolbar from '..';
+
+function createToolbar( { hidden = false, extraChildren = 0 } = {} ) {
+	return createElement(
+		'div',
+		hidden ? { style: { visibility: 'hidden' } } : null,
+		createElement(
+			NavigableToolbar,
+			{ 'aria-label': 'Block tools' },
+			createElement( 'button', null, 'Custom control' ),
+			...Array.from( { length: extraChildren }, ( _, index ) =>
+				createElement( 'span', { key: index } )
+			)
+		)
+	);
+}
+
+describe( 'NavigableToolbar', () => {
+	afterEach( cleanup );
+
+	it( 'does not reclassify a visibility-hidden toolbar when its subtree changes', async () => {
+		const { rerender } = render( createToolbar() );
+		const initialToolbar = screen.getByRole( 'toolbar' );
+
+		rerender( createToolbar( { extraChildren: 1 } ) );
+
+		await waitFor( () => {
+			expect( screen.getByRole( 'toolbar' ) ).not.toBe( initialToolbar );
+		} );
+		expect( console ).toHaveWarned();
+		const toolbar = screen.getByRole( 'toolbar' );
+
+		rerender( createToolbar( { hidden: true, extraChildren: 2 } ) );
+
+		await act(
+			() =>
+				new Promise( ( resolve ) =>
+					window.requestAnimationFrame( () =>
+						window.requestAnimationFrame( resolve )
+					)
+				)
+		);
+		expect( screen.getByRole( 'toolbar', { hidden: true } ) ).toBe(
+			toolbar
+		);
+	} );
+} );

package/src/components/panel-color-settings/test/{index.js → index.jsdom.test.jsx}

@@ -1,6 +1,9 @@
+import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
 import PanelColorSettings from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const noop = () => {};
 
 describe( 'PanelColorSettings', () => {

package/src/components/preset-input-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,9 +1,15 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PresetInputControl from '../index';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockVisibleElements();
+globalThis.wpVitest.mockScrollIntoView();
+
 describe( 'PresetInputControl', () => {
-	const mockOnChange = jest.fn();
+	const mockOnChange = vi.fn();
 
 	const defaultProps = {
 		ariaLabel: 'Spacing control',
@@ -19,7 +25,7 @@ describe( 'PresetInputControl', () => {
 	];
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'renders preset selection controls', () => {

package/src/components/preset-input-control/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	isValuePreset,
 	getPresetSlug,