@wordpress/components 40.0.0 → 40.1.0

package/src/color-indicator/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[`ColorIndicator matches the snapshot 1`] = `
+exports[`ColorIndicator > matches the snapshot 1`] = `
 <div>
   <span
     aria-label="sample label"

package/src/color-indicator/test/{index.tsx → index.jsdom.test.tsx}

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

package/src/color-palette/index.tsx

@@ -65,7 +65,7 @@ function SinglePalette( {
 					selectedIconProps={
 						isSelected
 							? {
-									fill:
+									color:
 										colordColor.contrast() >
 										colordColor.contrast( '#000' )
 											? '#fff'

package/src/color-palette/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
 	{ name: 'green', color: '#0f0' },
@@ -36,7 +39,7 @@ const ControlledColorPalette = ( {
 describe( 'ColorPalette', () => {
 	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(
 			<ColorPalette
 				aria-label="Colors"
@@ -66,7 +69,7 @@ describe( 'ColorPalette', () => {
 			<ColorPalette
 				aria-label="Colors"
 				colors={ EXAMPLE_COLORS }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				asButtons={ false }
 				presentation="command-buttons"
 				disableCustomColors
@@ -89,7 +92,7 @@ describe( 'ColorPalette', () => {
 				colors={ DUPLICATE_COLOR_PALETTE }
 				value="#000"
 				selectedSlug="dark-background"
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				asButtons
 				disableCustomColors
 				clearable={ false }
@@ -111,7 +114,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should render three color button options', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -126,7 +129,7 @@ describe( 'ColorPalette', () => {
 
 	it( 'should call onClick on an active button with undefined', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -144,7 +147,7 @@ describe( 'ColorPalette', () => {
 
 	it( 'should call onClick on an inactive button', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -173,7 +176,7 @@ describe( 'ColorPalette', () => {
 
 	it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -190,7 +193,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should render custom color picker', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -206,7 +209,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should allow disabling custom color picker', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -223,7 +226,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should render nothing when custom colors are disabled, there are no colors, and it is not clearable', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const { container } = render(
 			<ColorPalette
 				colors={ [] }
@@ -238,7 +241,7 @@ describe( 'ColorPalette', () => {
 
 	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -277,7 +280,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should show the clear button by default', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -293,7 +296,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should show the clear button even when `colors` is an empty array', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <ColorPalette colors={ [] } onChange={ onChange } /> );
 
@@ -303,7 +306,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should still show the clear button when colors is empty and custom colors are disabled', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ColorPalette
@@ -374,7 +377,7 @@ describe( 'ColorPalette', () => {
 				<ColorPalette
 					colors={ DUPLICATE_COLOR_PALETTE }
 					value={ undefined }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 				/>
 			);
 
@@ -387,7 +390,7 @@ describe( 'ColorPalette', () => {
 					colors={ DUPLICATE_COLOR_PALETTE }
 					value="#000"
 					selectedSlug="dark-text"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 				/>
 			);
 
@@ -403,7 +406,7 @@ describe( 'ColorPalette', () => {
 				<ColorPalette
 					colors={ DUPLICATE_COLOR_PALETTE }
 					value="#000"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 				/>
 			);
 
@@ -420,7 +423,7 @@ describe( 'ColorPalette', () => {
 					colors={ DUPLICATE_COLOR_PALETTE }
 					value="#000"
 					selectedSlug=""
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 				/>
 			);
 
@@ -435,7 +438,7 @@ describe( 'ColorPalette', () => {
 					colors={ DUPLICATE_COLOR_PALETTE }
 					value="#000"
 					selectedSlug="dark-text"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 				/>
 			);
 
@@ -448,7 +451,7 @@ describe( 'ColorPalette', () => {
 
 		it( 'should pass slug as third argument to onChange when a swatch is clicked', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<ColorPalette
@@ -466,7 +469,7 @@ describe( 'ColorPalette', () => {
 
 		it( 'should clear the selection when the selected swatch is clicked', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<ColorPalette
@@ -496,7 +499,7 @@ describe( 'ColorPalette', () => {
 					colors={ MIXED_PALETTE }
 					value="#fff"
 					selectedSlug="brand-white"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 				/>
 			);
 

package/src/color-palette/test/{utils.ts → utils.jsdom.test.ts}

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import {
 	extractColorNameFromCurrentValue,
 	normalizeColorValue,

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

@@ -1,9 +1,14 @@
+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';
 import _ComboboxControl from '..';
 import type { ComboboxControlOption, ComboboxControlProps } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockScrollIntoView();
+
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },
@@ -120,7 +125,7 @@ describe.each( [
 	it( 'should select the correct option via click events', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 2 ];
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }
@@ -145,7 +150,7 @@ describe.each( [
 		const user = await userEvent.setup();
 		const targetIndex = 4;
 		const targetOption = timezones[ targetIndex ];
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }
@@ -173,7 +178,7 @@ describe.each( [
 
 	it( 'calls onFilterValueChange whenever the textbox changes', async () => {
 		const user = userEvent.setup();
-		const onFilterValueChangeSpy = jest.fn();
+		const onFilterValueChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }
@@ -190,7 +195,7 @@ describe.each( [
 
 	it( 'clears the textbox value if there is no selected value on blur', async () => {
 		const user = userEvent.setup();
-		const onFilterValueChangeSpy = jest.fn();
+		const onFilterValueChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }
@@ -214,7 +219,7 @@ describe.each( [
 	it( 'should select the correct option from a search', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 13 ];
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }
@@ -241,7 +246,7 @@ describe.each( [
 	it( 'should render aria-live announcement upon selection', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 9 ];
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }
@@ -270,7 +275,7 @@ describe.each( [
 		const user = await userEvent.setup();
 		const unmatchedString = 'Mordor';
 		const targetOption = timezones[ 6 ];
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 		render(
 			<Component
 				options={ timezones }

package/src/composite/README.md

@@ -136,7 +136,7 @@ Allows the component to be rendered as a different HTML element or React compone
 
 Makes the component a focusable element. When this element gains keyboard focus, it gets a `data-focus-visible` attribute and triggers the `onFocusVisible` prop.
 
-The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the the `accessibleWhenDisabled` prop.
+The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the `accessibleWhenDisabled` prop.
 
 Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.
 

package/src/composite/context.tsx

@@ -5,3 +5,9 @@ export const CompositeContext = createContext< CompositeContextProps >( {} );
 CompositeContext.displayName = 'CompositeContext';
 
 export const useCompositeContext = () => useContext( CompositeContext );
+
+export const CompositeGroupContext = createContext( false );
+CompositeGroupContext.displayName = 'CompositeGroupContext';
+
+export const useCompositeGroupContext = () =>
+	useContext( CompositeGroupContext );

package/src/composite/group-label.tsx

@@ -1,7 +1,7 @@
 import * as Ariakit from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
-import { useCompositeContext } from './context';
+import { useCompositeContext, useCompositeGroupContext } from './context';
 import type { CompositeGroupLabelProps } from './types';
 
 export const CompositeGroupLabel = forwardRef<
@@ -9,6 +9,13 @@ export const CompositeGroupLabel = forwardRef<
 	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
 >( function CompositeGroupLabel( props, ref ) {
 	const context = useCompositeContext();
+	const isWithinGroup = useCompositeGroupContext();
+
+	if ( ! isWithinGroup ) {
+		throw new Error(
+			'Composite.GroupLabel can only be rendered inside Composite.Group.'
+		);
+	}
 
 	// @ts-expect-error The store prop is undocumented and only used by the
 	// legacy compat layer. The `store` prop is documented, but its type is

package/src/composite/group.tsx

@@ -1,7 +1,7 @@
 import * as Ariakit from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
-import { useCompositeContext } from './context';
+import { CompositeGroupContext, useCompositeContext } from './context';
 import type { CompositeGroupProps } from './types';
 
 export const CompositeGroup = forwardRef<
@@ -9,11 +9,18 @@ export const CompositeGroup = forwardRef<
 	WordPressComponentProps< CompositeGroupProps, 'div', false >
 >( function CompositeGroup( props, ref ) {
 	const context = useCompositeContext();
+	const { children, ...restProps } = props;
 
 	// @ts-expect-error The store prop is undocumented and only used by the
 	// legacy compat layer. The `store` prop is documented, but its type is
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
+	return (
+		<Ariakit.CompositeGroup store={ store } { ...restProps } ref={ ref }>
+			<CompositeGroupContext.Provider value>
+				{ children }
+			</CompositeGroupContext.Provider>
+		</Ariakit.CompositeGroup>
+	);
 } );

package/src/composite/item.tsx

@@ -1,5 +1,6 @@
 import * as Ariakit from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
+import warning from '@wordpress/warning';
 import type { WordPressComponentProps } from '../context';
 import { useCompositeContext } from './context';
 import type { CompositeItemProps } from './types';
@@ -14,6 +15,11 @@ export const CompositeItem = forwardRef<
 	// legacy compat layer. The `store` prop is documented, but its type is
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+	if ( ! store ) {
+		warning(
+			'Composite.Item: Missing composite state. Render inside Composite to enable composite keyboard behavior.'
+		);
+	}
 
 	return <Ariakit.CompositeItem store={ store } { ...props } ref={ ref } />;
 } );

package/src/composite/legacy/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 import {
 	queryByAttribute,
 	render,
@@ -16,23 +17,15 @@ import {
 // page down. Without this, nothing has a height, and so paging up
 // and down doesn't behave as expected in tests.
 
-let clientHeightSpy: jest.SpiedGetter<
-	typeof HTMLElement.prototype.clientHeight
->;
-
-beforeAll( () => {
-	clientHeightSpy = jest
-		.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
-		.mockImplementation( function getClientHeight( this: HTMLElement ) {
+beforeEach( () => {
+	vi.spyOn( HTMLElement.prototype, 'clientHeight', 'get' ).mockImplementation(
+		function getClientHeight( this: HTMLElement ) {
 			if ( this.tagName === 'BODY' ) {
 				return window.outerHeight;
 			}
 			return 50;
-		} );
-} );
-
-afterAll( () => {
-	clientHeightSpy?.mockRestore();
+		}
+	);
 } );
 
 type InitialState = Parameters< typeof useCompositeState >[ 0 ];

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

@@ -1,5 +1,7 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 import { queryByAttribute, render, screen } from '@testing-library/react';
 import { click, press, waitFor } from '@ariakit/test';
+import * as Ariakit from '@ariakit/react';
 import type { ComponentProps } from 'react';
 import { useState } from '@wordpress/element';
 import { Composite } from '..';
@@ -18,26 +20,20 @@ async function renderAndValidate( ...args: Parameters< typeof render > ) {
 }
 
 describe( 'Composite', () => {
-	let clientHeightSpy: jest.SpiedGetter<
-		typeof HTMLElement.prototype.clientHeight
-	>;
-
-	beforeAll( () => {
+	beforeEach( () => {
 		// This is necessary because of how Ariakit calculates page up and
 		// page down. Without this, nothing has a height, and so paging up
 		// and down doesn't behave as expected in tests.
-		clientHeightSpy = jest
-			.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
-			.mockImplementation( function getClientHeight( this: HTMLElement ) {
-				if ( this.tagName === 'BODY' ) {
-					return window.outerHeight;
-				}
-				return 50;
-			} );
-	} );
-
-	afterAll( () => {
-		clientHeightSpy?.mockRestore();
+		vi.spyOn(
+			HTMLElement.prototype,
+			'clientHeight',
+			'get'
+		).mockImplementation( function getClientHeight( this: HTMLElement ) {
+			if ( this.tagName === 'BODY' ) {
+				return window.outerHeight;
+			}
+			return 50;
+		} );
 	} );
 
 	test( 'Renders as a single tab stop', async () => {
@@ -700,4 +696,51 @@ describe( 'Composite', () => {
 			} );
 		} );
 	} );
+
+	describe( 'required context', () => {
+		it( 'warns when Composite.Item has no composite state', () => {
+			render( <Composite.Item>Item</Composite.Item> );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Item' } )
+			).toBeVisible();
+			expect( console ).toHaveWarnedWith(
+				'Composite.Item: Missing composite state. Render inside Composite to enable composite keyboard behavior.'
+			);
+		} );
+
+		it( 'supports an explicit store prop for Composite.Item', () => {
+			function ItemWithStore() {
+				const store = Ariakit.useCompositeStore();
+
+				return (
+					<Composite.Item
+						// @ts-expect-error The store prop is intentionally omitted from the public types.
+						store={ store }
+					>
+						Item
+					</Composite.Item>
+				);
+			}
+
+			render( <ItemWithStore /> );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Item' } )
+			).toBeVisible();
+		} );
+
+		it( 'throws when Composite.GroupLabel is outside Composite.Group', () => {
+			expect( () =>
+				render(
+					<Composite>
+						<Composite.GroupLabel>Label</Composite.GroupLabel>
+					</Composite>
+				)
+			).toThrow(
+				'Composite.GroupLabel can only be rendered inside Composite.Group.'
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
 } );

package/src/composite/types.ts

@@ -141,7 +141,7 @@ export type CompositeProps = CompositeStoreProps & {
 	 * `onFocusVisible` prop.
 	 * The component supports the `disabled` prop even for those elements not
 	 * supporting the native `disabled` attribute. Disabled elements may be
-	 * still accessible via keyboard by using the the `accessibleWhenDisabled`
+	 * still accessible via keyboard by using the `accessibleWhenDisabled`
 	 * prop.
 	 * Non-native focusable elements will lose their focusability entirely.
 	 * However, native focusable elements will retain their inherent focusability.

package/src/confirm-dialog/test/{index.tsx → index.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 { ConfirmDialog } from '..';
 import styles from '../style.module.scss';
+globalThis.wpVitest.mockMatchMedia();
 
 const noop = () => {};
 
@@ -115,7 +117,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
@@ -135,7 +137,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -171,7 +173,7 @@ describe( 'Confirm', () => {
 
 			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
 				const user = userEvent.setup();
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -192,7 +194,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -211,7 +213,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
@@ -230,8 +232,8 @@ describe( 'Confirm', () => {
 			it( 'calls only the `onCancel` callback and not the `onConfirm` callback when the cancel button is submitted using the keyboard', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog
@@ -251,8 +253,8 @@ describe( 'Confirm', () => {
 			it( 'calls only the `onConfirm` callback when the confirm button is submitted using the keyboard', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog
@@ -305,7 +307,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onConfirm` callback if `OK`', async () => {
 			const user = userEvent.setup();
 
-			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+			const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ onConfirm }>
@@ -323,7 +325,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
 			const user = userEvent.setup();
 
-			const onCancel = jest.fn().mockName( 'onCancel()' );
+			const onCancel = vi.fn().mockName( 'onCancel()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ onCancel }>
@@ -340,7 +342,7 @@ describe( 'Confirm', () => {
 
 		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
 			const user = userEvent.setup();
-			const onCancel = jest.fn().mockName( 'onCancel()' );
+			const onCancel = vi.fn().mockName( 'onCancel()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ onCancel }>
@@ -360,7 +362,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
 			const user = userEvent.setup();
 
-			const onCancel = jest.fn().mockName( 'onCancel()' );
+			const onCancel = vi.fn().mockName( 'onCancel()' );
 
 			render(
 				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -376,7 +378,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
 			const user = userEvent.setup();
 
-			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+			const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ onConfirm } onCancel={ noop }>