@wordpress/components 40.0.0 → 40.1.0

package/src/date-time/time-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,14 +1,28 @@
+import {
+	afterAll,
+	afterEach,
+	beforeAll,
+	beforeEach,
+	describe,
+	expect,
+	it,
+	vi,
+} from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import timezoneMock from 'timezone-mock';
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
 import TimePicker from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -62,7 +76,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with an updated hour (12-hour clock)', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -84,7 +98,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with a bounded hour (12-hour clock) if the hour is out of bounds', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -106,7 +120,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with an updated hour (24-hour clock)', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -128,7 +142,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with a bounded minute if out of bounds', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -150,7 +164,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with a bounded day if out of bounds', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -173,7 +187,7 @@ describe( 'TimePicker', () => {
 	it( 'should clamp day when switching months', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -195,7 +209,7 @@ describe( 'TimePicker', () => {
 	it( 'should clamp day when switching year from leap to non-leap', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -219,7 +233,7 @@ describe( 'TimePicker', () => {
 	it( 'should switch to PM correctly', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -239,7 +253,7 @@ describe( 'TimePicker', () => {
 	it( 'should switch to AM correctly', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -259,7 +273,7 @@ describe( 'TimePicker', () => {
 	it( 'should allow to set the time correctly when the PM period is selected', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -292,7 +306,7 @@ describe( 'TimePicker', () => {
 	it( 'should truncate at the minutes on change', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -312,7 +326,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should reset the date when currentTime changed', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		const { rerender } = render(
 			<TimePicker
@@ -351,7 +365,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		const { rerender } = render(
 			<form aria-label="form">
@@ -395,7 +409,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'Should change layouts/orders when `dateOrder` prop is passed', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<form aria-label="form">
@@ -425,7 +439,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'Should ignore `is12Hour` prop setting when `dateOrder` prop is explicitly passed', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<form aria-label="form">
@@ -456,7 +470,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'Should set a time when passed a null currentTime', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -505,7 +519,7 @@ describe( 'TimePicker', () => {
 		} );
 
 		afterEach( () => {
-			jest.useRealTimers();
+			vi.useRealTimers();
 			timezoneMock.unregister();
 		} );
 
@@ -576,19 +590,15 @@ describe( 'TimePicker', () => {
 					// For undefined, set fake system time to get a known current time
 					let user: ReturnType< typeof userEvent.setup >;
 					if ( initialTime === undefined ) {
-						jest.useFakeTimers();
+						vi.useFakeTimers( { toFake: [ 'Date' ] } );
 						// Set system time to 12:00 UTC
-						jest.setSystemTime(
-							Date.UTC( 2025, 11, 18, 12, 0, 0 )
-						);
-						user = userEvent.setup( {
-							advanceTimers: jest.advanceTimersByTime,
-						} );
+						vi.setSystemTime( Date.UTC( 2025, 11, 18, 12, 0, 0 ) );
+						user = userEvent.setup();
 					} else {
 						user = userEvent.setup();
 					}
 
-					const onChange = jest.fn();
+					const onChange = vi.fn();
 
 					const { rerender } = render(
 						<TimePicker
@@ -653,7 +663,7 @@ describe( 'TimePicker', () => {
 	describe( 'ISO 8601 compliance', () => {
 		it( 'should handle years below 1000 with zero-padded output', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<TimePicker

package/src/date-time/time-picker/time-input/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,13 +1,18 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TimeInput from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 describe( 'TimeInput', () => {
 	it( 'should call onChange with updated values | 24-hours format', async () => {
 		const user = userEvent.setup();
 
 		const timeInputValue = { hours: 0, minutes: 0 };
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimeInput
@@ -59,7 +64,7 @@ describe( 'TimeInput', () => {
 		const user = userEvent.setup();
 
 		const timeInputValue = { hours: 0, minutes: 0 };
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimeInput
@@ -106,7 +111,7 @@ describe( 'TimeInput', () => {
 		const user = userEvent.setup();
 
 		const timeInputValue = { hours: 0, minutes: 0 };
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimeInput

package/src/disabled/index.tsx

@@ -59,14 +59,14 @@ function Disabled( {
 			<div
 				// @ts-expect-error `inert` is not declared in React 18's HTML attribute types.
 				inert={ isDisabled ? 'true' : undefined }
+				// Only the disabled styling is conditional. The consumer's own
+				// className has to stick around so the wrapper stays targetable
+				// whether or not it is currently disabled.
 				className={
-					isDisabled
-						? clsx(
-								styles.disabled,
-								className,
-								'components-disabled'
-						  )
-						: undefined
+					clsx(
+						className,
+						isDisabled && [ styles.disabled, 'components-disabled' ]
+					) || undefined
 				}
 				{ ...props }
 			>

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Disabled from '../';
@@ -67,6 +68,31 @@ describe( 'Disabled', () => {
 		);
 	} );
 
+	it( 'keeps the consumer className and toggles only the disabled classes', () => {
+		const MaybeDisable = ( { isDisabled = true } ) => (
+			<Disabled
+				isDisabled={ isDisabled }
+				className="my-wrapper"
+				data-testid="disabled-wrapper"
+			>
+				<Form />
+			</Disabled>
+		);
+
+		const { rerender } = render( <MaybeDisable /> );
+
+		const wrapper = screen.getByTestId( 'disabled-wrapper' );
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).toHaveClass( 'components-disabled' );
+		expect( wrapper ).toHaveClass( styles.disabled );
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).not.toHaveClass( 'components-disabled' );
+		expect( wrapper ).not.toHaveClass( styles.disabled );
+	} );
+
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {
 		const user = userEvent.setup();
 

package/src/draggable/index.tsx

@@ -6,7 +6,7 @@ import type { DraggableProps } from './types';
 import styles from './style.module.scss';
 
 // Legacy class names preserved alongside the CSS-module hashed ones for
-// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's
+// backwards compatibility. `filter(Boolean)` strips `undefined` from the
 // CSS-module mock.
 const dragImageClasses = [
 	styles[ 'invisible-drag-image' ],

package/src/draggable/style.module.scss

@@ -2,7 +2,7 @@
 
 .invisible-drag-image {
 	position: fixed;
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Offscreen drag-image stand-in; flipping with writing direction has no benefit. */
+	/* stylelint-disable-next-line logical-css/require-logical-properties -- Offscreen drag-image stand-in; flipping with writing direction has no benefit. */
 	left: -1000px;
 	height: 50px;
 	width: 50px;

package/src/dropdown/style.module.scss

@@ -2,7 +2,7 @@
 
 .content-wrapper {
 	// Negative margin to reset (offset) the default padding on .components-popover__content.
-	/* stylelint-disable plugin/use-logical-properties-and-values -- Preserve the previous physical offsets against Popover padding. */
+	/* stylelint-disable logical-css/require-logical-properties -- Preserve the previous physical offsets against Popover padding. */
 	margin-left: -$grid-unit-10;
 	margin-right: -$grid-unit-10;
 
@@ -13,7 +13,7 @@
 	&:last-of-type {
 		margin-bottom: -$grid-unit-10;
 	}
-	/* stylelint-enable plugin/use-logical-properties-and-values */
+	/* stylelint-enable logical-css/require-logical-properties */
 }
 
 .padding-small {

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

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Dropdown from '..';

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
@@ -26,22 +27,22 @@ describe( 'DropdownMenu', () => {
 			{
 				title: 'Up',
 				icon: arrowUp,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 			{
 				title: 'Right',
 				icon: arrowRight,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 			{
 				title: 'Down',
 				icon: arrowDown,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 			{
 				title: 'Left',
 				icon: arrowLeft,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 		];
 

package/src/duotone-picker/test/{custom-duotone-bar.tsx → custom-duotone-bar.jsdom.test.tsx}

@@ -1,12 +1,15 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import CustomDuotoneBar from '../custom-duotone-bar';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const VALUE = [ '#000000', '#ffffff' ];
 
 describe( 'CustomDuotoneBar', () => {
 	it( 'does not offer to reposition control points, since a duotone has no positions to save', () => {
-		render( <CustomDuotoneBar value={ VALUE } onChange={ jest.fn() } /> );
+		render( <CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } /> );
 
 		const [ firstPoint ] = screen.getAllByRole( 'button', {
 			name: /Gradient control point/,
@@ -22,7 +25,7 @@ describe( 'CustomDuotoneBar', () => {
 
 	it( 'ignores arrow keys on a control point', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <CustomDuotoneBar value={ VALUE } onChange={ onChange } /> );
 
@@ -36,7 +39,7 @@ describe( 'CustomDuotoneBar', () => {
 	} );
 
 	it( 'ignores dragging a control point', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <CustomDuotoneBar value={ VALUE } onChange={ onChange } /> );
 
@@ -56,12 +59,12 @@ describe( 'CustomDuotoneBar', () => {
 	// gradient bar's own `stopPropagation` guards against.
 	it( 'does not let arrow keys bubble out of the control', async () => {
 		const user = userEvent.setup();
-		const onAncestorKeyDown = jest.fn();
+		const onAncestorKeyDown = vi.fn();
 
 		render(
 			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 			<div onKeyDown={ onAncestorKeyDown }>
-				<CustomDuotoneBar value={ VALUE } onChange={ jest.fn() } />
+				<CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } />
 			</div>
 		);
 
@@ -79,7 +82,7 @@ describe( 'CustomDuotoneBar', () => {
 	it( 'still opens the color picker when a control point is clicked', async () => {
 		const user = userEvent.setup();
 
-		render( <CustomDuotoneBar value={ VALUE } onChange={ jest.fn() } /> );
+		render( <CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } /> );
 
 		await user.click(
 			screen.getAllByRole( 'button', {
@@ -94,12 +97,12 @@ describe( 'CustomDuotoneBar', () => {
 
 	it( 'still lets other keys bubble', async () => {
 		const user = userEvent.setup();
-		const onAncestorKeyDown = jest.fn();
+		const onAncestorKeyDown = vi.fn();
 
 		render(
 			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 			<div onKeyDown={ onAncestorKeyDown }>
-				<CustomDuotoneBar value={ VALUE } onChange={ jest.fn() } />
+				<CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } />
 			</div>
 		);
 

package/src/duotone-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
@@ -23,7 +24,7 @@ const COLOR_PALETTE = [
 describe( 'DuotonePicker', () => {
 	it( 'should use matching values only for display in command button presentation', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		render(
 			<DuotonePicker
 				aria-label="Duotones"
@@ -63,7 +64,7 @@ describe( 'DuotonePicker', () => {
 				aria-label="Duotones"
 				duotonePalette={ DUPLICATE_DUOTONES }
 				colorPalette={ COLOR_PALETTE }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				asButtons={ false }
 				presentation="command-buttons"
 				disableCustomDuotone
@@ -89,7 +90,7 @@ describe( 'DuotonePicker', () => {
 				colorPalette={ COLOR_PALETTE }
 				value={ COLORS_A }
 				selectedSlug="dark-background"
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				asButtons
 				unsetable={ false }
 				clearable={ false }
@@ -120,7 +121,7 @@ describe( 'DuotonePicker', () => {
 					duotonePalette={ DUPLICATE_DUOTONES }
 					colorPalette={ COLOR_PALETTE }
 					value={ undefined }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomDuotone
 					disableCustomColors
 				/>
@@ -137,7 +138,7 @@ describe( 'DuotonePicker', () => {
 					colorPalette={ COLOR_PALETTE }
 					value={ COLORS_A }
 					selectedSlug="dark-text"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					unsetable={ false }
 					disableCustomDuotone
 					disableCustomColors
@@ -157,7 +158,7 @@ describe( 'DuotonePicker', () => {
 					duotonePalette={ DUPLICATE_DUOTONES }
 					colorPalette={ COLOR_PALETTE }
 					value={ COLORS_A }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					unsetable={ false }
 					disableCustomDuotone
 					disableCustomColors
@@ -177,7 +178,7 @@ describe( 'DuotonePicker', () => {
 					colorPalette={ COLOR_PALETTE }
 					value={ COLORS_A }
 					selectedSlug=""
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					unsetable={ false }
 					disableCustomDuotone
 					disableCustomColors
@@ -191,7 +192,7 @@ describe( 'DuotonePicker', () => {
 
 		it( 'should pass index and slug to onChange when a swatch is clicked', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<DuotonePicker
@@ -215,7 +216,7 @@ describe( 'DuotonePicker', () => {
 
 		it( 'should clear only the selected preset, identified by slug', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<DuotonePicker
@@ -331,7 +332,7 @@ describe( 'DuotonePicker', () => {
 					] }
 					colorPalette={ COLOR_PALETTE }
 					value={ COLORS_B }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					unsetable={ false }
 					disableCustomDuotone
 					disableCustomColors

package/src/external-link/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ExternalLink } from '..';
@@ -5,7 +6,7 @@ import { ExternalLink } from '..';
 describe( 'ExternalLink', () => {
 	test( 'should call function passed in onClick handler when clicking the link', async () => {
 		const user = await userEvent.setup();
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 
 		render(
 			<ExternalLink href="https://wordpress.org" onClick={ onClickMock }>
@@ -35,7 +36,7 @@ describe( 'ExternalLink', () => {
 
 		// We are using this approach so we can test the defaultPrevented
 		// without passing an onClick prop to the component.
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		link.onclick = onClickMock;
 
 		await user.click( link );
@@ -47,7 +48,7 @@ describe( 'ExternalLink', () => {
 
 	test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => {
 		const user = await userEvent.setup();
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 
 		render(
 			<ExternalLink href="#test" onClick={ onClickMock }>
@@ -81,7 +82,7 @@ describe( 'ExternalLink', () => {
 
 		// We are using this approach so we can test the defaultPrevented
 		// without passing an onClick prop to the component.
-		const onClickMock = jest.fn();
+		const onClickMock = vi.fn();
 		link.onclick = onClickMock;
 
 		await user.click( link );

package/src/focal-point-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import _Picker from '..';
 import type { FocalPointPickerProps } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
 type Log = { name: string; args: unknown[] };
 type EventLogger = ( name: string, args: unknown[] ) => void;
 
@@ -11,7 +14,7 @@ const Picker = ( props: React.ComponentProps< typeof _Picker > ) => {
 };
 
 const props: FocalPointPickerProps = {
-	onChange: jest.fn(),
+	onChange: vi.fn(),
 	url: 'test-url',
 	value: {
 		x: 0,
@@ -24,7 +27,7 @@ describe( 'FocalPointPicker', () => {
 		it( 'clicking the draggable area should focus it', async () => {
 			const user = userEvent.setup();
 
-			const mockOnChange = jest.fn();
+			const mockOnChange = vi.fn();
 
 			render( <Picker { ...props } onChange={ mockOnChange } /> );
 
@@ -36,9 +39,9 @@ describe( 'FocalPointPicker', () => {
 		} );
 
 		it( 'should stop a drag operation when focus is lost', () => {
-			const mockOnDrag = jest.fn();
-			const mockOnDragEnd = jest.fn();
-			const mockOnChange = jest.fn();
+			const mockOnDrag = vi.fn();
+			const mockOnDragEnd = vi.fn();
+			const mockOnChange = vi.fn();
 
 			render(
 				<Picker
@@ -99,8 +102,8 @@ describe( 'FocalPointPicker', () => {
 		it( 'should allow value altering', async () => {
 			const user = userEvent.setup();
 
-			const spyChange = jest.fn();
-			const spy = jest.fn();
+			const spyChange = vi.fn();
+			const spy = vi.fn();
 
 			render(
 				<Picker
@@ -142,7 +145,7 @@ describe( 'FocalPointPicker', () => {
 		it( 'call onChange with the expected values', async () => {
 			const user = userEvent.setup();
 
-			const spyChange = jest.fn();
+			const spyChange = vi.fn();
 			render(
 				<Picker
 					{ ...props }
@@ -165,7 +168,7 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'value handling', () => {
 		it( 'should handle legacy string values', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Picker
 					{ ...props }

package/src/focal-point-picker/test/{media.tsx → media.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Media from '../media';
 import type { FocalPointPickerMediaProps } from '../types';