@wordpress/block-editor 17.0.2-next.v.202608281122.0 → 17.1.0

package/src/components/list-view/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.jsx → 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.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.jsx → 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.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.jsx → 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.jsx → 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,

package/src/components/provider/test/{experimental-provider.jsx → experimental-provider.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { useRegistry, useSelect } from '@wordpress/data';
 import { BlockEditorProvider, ExperimentalBlockEditorProvider } from '../';
@@ -63,9 +64,9 @@ describe( 'BlockEditorProvider', () => {
 		expect( settings ).toHaveProperty( 'stableSetting' );
 	} );
 	it( 'preserves deprecated getters incoming from the settings reducer', async () => {
-		const consoleWarn = jest
+		const consoleWarn = vi
 			.spyOn( global.console, 'warn' )
-			.mockImplementation();
+			.mockImplementation( () => {} );
 
 		const { container } = render(
 			<BlockEditorProvider

package/src/components/provider/test/{use-block-sync.jsx → use-block-sync.jsdom.test.jsx}

@@ -1,16 +1,17 @@
 import { registerBlockType } from '@wordpress/blocks';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import useBlockSync from '../use-block-sync';
 import withRegistryProvider from '../with-registry-provider';
 import * as blockEditorActions from '../../../store/actions';
 import { store as blockEditorStore } from '../../../store';
-jest.mock( '../../../store/actions', () => {
-	const actions = jest.requireActual( '../../../store/actions' );
+vi.mock( import( '../../../store/actions' ), async ( importOriginal ) => {
+	const actions = await importOriginal();
 	return {
 		...actions,
-		resetBlocks: jest.fn( actions.resetBlocks ),
-		replaceInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
-		setHasControlledInnerBlocks: jest.fn(
+		resetBlocks: vi.fn( actions.resetBlocks ),
+		replaceInnerBlocks: vi.fn( actions.replaceInnerBlocks ),
+		setHasControlledInnerBlocks: vi.fn(
 			actions.setHasControlledInnerBlocks
 		),
 	};
@@ -36,18 +37,18 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'resets the block-editor blocks when the controlled value changes', async () => {
 		const fakeBlocks = [];
-		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
-		const replaceInnerBlocks = jest.spyOn(
+		const resetBlocks = vi.spyOn( blockEditorActions, 'resetBlocks' );
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const { rerender, unmount } = render(
 			<TestWrapper
@@ -93,13 +94,13 @@ describe( 'useBlockSync hook', () => {
 
 	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
 		const fakeBlocks = [];
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
-		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const resetBlocks = vi.spyOn( blockEditorActions, 'resetBlocks' );
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const { rerender, unmount } = render(
 			<TestWrapper
@@ -155,12 +156,12 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{
@@ -213,7 +214,7 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'sets a block as an inner block controller if a clientId is provided', async () => {
-		const setAsController = jest.spyOn(
+		const setAsController = vi.spyOn(
 			blockEditorActions,
 			'setHasControlledInnerBlocks'
 		);
@@ -222,16 +223,16 @@ describe( 'useBlockSync hook', () => {
 			<TestWrapper
 				clientId="test"
 				value={ [] }
-				onChange={ jest.fn() }
-				onInput={ jest.fn() }
+				onChange={ vi.fn() }
+				onInput={ vi.fn() }
 			/>
 		);
 		expect( setAsController ).toHaveBeenCalledWith( 'test', true );
 	} );
 
 	it( 'calls onInput when a non-persistent block change occurs', async () => {
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 		const value1 = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
@@ -266,8 +267,8 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'passes undoIgnore when a non-persistent block change ignores history', async () => {
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 		const value1 = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
@@ -306,8 +307,8 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'calls onChange if a persistent change occurs', async () => {
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
@@ -340,13 +341,13 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'avoids updating the parent if there is a pending incoming change', async () => {
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
 
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{
@@ -385,13 +386,13 @@ describe( 'useBlockSync hook', () => {
 	} );
 
 	it( 'avoids updating the block-editor store if there is a pending outgoint change', async () => {
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
 
-		const onChange = jest.fn();
-		const onInput = jest.fn();
+		const onChange = vi.fn();
+		const onInput = vi.fn();
 
 		const value1 = [
 			{
@@ -441,8 +442,8 @@ describe( 'useBlockSync hook', () => {
 		const fakeBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		const onChange1 = jest.fn();
-		const onInput = jest.fn();
+		const onChange1 = vi.fn();
+		const onInput = vi.fn();
 
 		let registry;
 		const setRegistry = ( reg ) => {
@@ -478,7 +479,7 @@ describe( 'useBlockSync hook', () => {
 
 		// Reset it so that we can test that it was not called after this point.
 		onChange1.mockReset();
-		const onChange2 = jest.fn();
+		const onChange2 = vi.fn();
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
@@ -510,8 +511,8 @@ describe( 'useBlockSync hook', () => {
 		const fakeBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		const onChange1 = jest.fn();
-		const onInput = jest.fn();
+		const onChange1 = vi.fn();
+		const onInput = vi.fn();
 
 		let registry;
 		const setRegistry = ( reg ) => {
@@ -531,7 +532,7 @@ describe( 'useBlockSync hook', () => {
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
 		];
 
-		const onChange2 = jest.fn();
+		const onChange2 = vi.fn();
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
@@ -562,9 +563,9 @@ describe( 'useBlockSync hook', () => {
 	it( 'preserves external client IDs in onChange callback for inner block controllers', async () => {
 		const originalClientId = 'original-external-id';
 		const innerBlockClientId = 'inner-external-id';
-		const onChange = jest.fn();
-		const onInput = jest.fn();
-		const replaceInnerBlocks = jest.spyOn(
+		const onChange = vi.fn();
+		const onInput = vi.fn();
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
@@ -630,7 +631,7 @@ describe( 'useBlockSync hook', () => {
 
 	it( 'clones blocks with new internal IDs for inner block controllers', async () => {
 		const originalClientId = 'original-external-id';
-		const replaceInnerBlocks = jest.spyOn(
+		const replaceInnerBlocks = vi.spyOn(
 			blockEditorActions,
 			'replaceInnerBlocks'
 		);
@@ -649,8 +650,8 @@ describe( 'useBlockSync hook', () => {
 			<TestWrapper
 				clientId="test-controller"
 				value={ controlledBlocks }
-				onChange={ jest.fn() }
-				onInput={ jest.fn() }
+				onChange={ vi.fn() }
+				onInput={ vi.fn() }
 			/>
 		);
 

package/src/components/recursion-provider/test/{index.jsx → index.jsdom.test.jsx}

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

package/src/components/responsive-block-control/style.scss

@@ -10,6 +10,7 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
+	// stylelint-disable-next-line property-no-deprecated -- Pending review of overflow-wrap alternative.
 	word-wrap: normal !important;
 	word-break: normal !important;
 }

package/src/components/responsive-block-control/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,9 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Fragment, useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 import ResponsiveBlockControl from '../index';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -198,7 +201,7 @@ describe( 'Default and Responsive modes', () => {
 			},
 		];
 
-		const mockRenderDefaultControl = jest.fn(
+		const mockRenderDefaultControl = vi.fn(
 			renderTestDefaultControlComponent
 		);
 
@@ -285,9 +288,9 @@ describe( 'Default and Responsive modes', () => {
 	} );
 
 	it( 'should render custom responsive controls when renderResponsiveControls prop is provided and in responsive mode', () => {
-		const spyRenderDefaultControl = jest.fn();
+		const spyRenderDefaultControl = vi.fn();
 
-		const mockRenderResponsiveControls = jest.fn( ( viewports ) => {
+		const mockRenderResponsiveControls = vi.fn( ( viewports ) => {
 			return viewports.map( ( { id, label } ) => {
 				return (
 					<Fragment key={ `${ inputId }-${ id }` }>