@wordpress/block-library 10.5.2-next.v.202608281122.0 → 11.0.0

package/src/navigation-link/shared/test/{use-enable-link-status-validation.test.js → use-enable-link-status-validation.jsdom.test.js}

@@ -1,11 +1,13 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
+import { useSelect } from '@wordpress/data';
 import { useEnableLinkStatusValidation } from '../use-enable-link-status-validation';
+
 // Mock useSelect directly at the implementation level to avoid loading complex dependencies
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
-const { useSelect } = require( '@wordpress/data' );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 describe( 'useEnableLinkStatusValidation', () => {
 	const mockClientId = 'test-client-id';
@@ -13,7 +15,7 @@ describe( 'useEnableLinkStatusValidation', () => {
 	const mockSelectedBlockId = 'selected-block-id';
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'should return true when root navigation block is selected', () => {

package/src/navigation-link/shared/test/{use-entity-binding.js → use-entity-binding.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import {
 	useBlockBindingsUtils,
@@ -10,22 +11,22 @@ import {
 } from '../use-entity-binding';
 
 // Mock the entire @wordpress/block-editor module
-jest.mock( '@wordpress/block-editor', () => ( {
-	useBlockBindingsUtils: jest.fn(),
-	useBlockEditingMode: jest.fn(),
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
+	useBlockBindingsUtils: vi.fn(),
+	useBlockEditingMode: vi.fn(),
 } ) );
 
 // Mock useSelect specifically to avoid needing to set up full data store
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	const mock = jest.fn();
-	return mock;
-} );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 describe( 'useEntityBinding', () => {
-	const mockUpdateBlockBindings = jest.fn();
+	const mockUpdateBlockBindings = vi.fn();
 
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		useBlockBindingsUtils.mockReturnValue( {
 			updateBlockBindings: mockUpdateBlockBindings,
 		} );
@@ -325,9 +326,9 @@ describe( 'useEntityBinding', () => {
 		} );
 
 		it( 'handles invalid kind gracefully in createBinding', () => {
-			const consoleSpy = jest
+			const consoleSpy = vi
 				.spyOn( console, 'warn' )
-				.mockImplementation();
+				.mockImplementation( () => {} );
 
 			const attributes = {
 				metadata: {},

package/src/navigation-link/shared/test/{use-handle-link-change.test.js → use-handle-link-change.jsdom.test.js}

@@ -1,35 +1,38 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
+import { useDispatch } from '@wordpress/data';
+import { useHandleLinkChange } from '../use-handle-link-change';
+import { updateAttributes } from '../update-attributes';
+import { useEntityBinding } from '../use-entity-binding';
 // Mock the entire @wordpress/block-editor module
-jest.mock( '@wordpress/block-editor', () => ( {
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
 	store: {},
 } ) );
+
 // Mock the entire @wordpress/core-data module
-jest.mock( '@wordpress/core-data', () => ( {
+vi.mock( import( '@wordpress/core-data' ), () => ( {
 	store: {},
 } ) );
+
 // Mock useDispatch specifically to avoid needing to set up full data store
-jest.mock( '@wordpress/data', () => ( {
-	useDispatch: jest.fn(),
-	createSelector: jest.fn( ( fn ) => fn ),
-	createRegistrySelector: jest.fn( ( fn ) => fn ),
-	createReduxStore: jest.fn( () => ( {} ) ),
-	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useDispatch: vi.fn(),
+	createSelector: vi.fn( ( fn ) => fn ),
+	createRegistrySelector: vi.fn( ( fn ) => fn ),
+	createReduxStore: vi.fn( () => ( {} ) ),
+	combineReducers: vi.fn( ( reducers ) => ( state = {}, action ) => {
 		const newState = {};
 		Object.keys( reducers ).forEach( ( key ) => {
 			newState[ key ] = reducers[ key ]( state[ key ], action );
 		} );
 		return newState;
 	} ),
-	register: jest.fn(),
+	register: vi.fn(),
 } ) );
-import { useDispatch } from '@wordpress/data';
-import { useHandleLinkChange } from '../use-handle-link-change';
-import { updateAttributes } from '../update-attributes';
-import { useEntityBinding } from '../use-entity-binding';
 
 // Mock internal dependencies
-jest.mock( '../update-attributes' );
-jest.mock( '../use-entity-binding' );
+vi.mock( import( '../update-attributes' ) );
+vi.mock( import( '../use-entity-binding' ) );
 
 describe( 'useHandleLinkChange', () => {
 	let mockSetAttributes;
@@ -41,10 +44,10 @@ describe( 'useHandleLinkChange', () => {
 
 	beforeEach( () => {
 		// Reset mocks
-		mockSetAttributes = jest.fn();
-		mockUpdateBlockAttributes = jest.fn();
-		mockCreateBinding = jest.fn();
-		mockClearBinding = jest.fn();
+		mockSetAttributes = vi.fn();
+		mockUpdateBlockAttributes = vi.fn();
+		mockCreateBinding = vi.fn();
+		mockClearBinding = vi.fn();
 
 		// Mock useDispatch
 		useDispatch.mockReturnValue( {
@@ -70,7 +73,7 @@ describe( 'useHandleLinkChange', () => {
 	} );
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	describe( 'creating new entity links', () => {

package/src/navigation-link/shared/test/{use-link-preview.test.js → use-link-preview.jsdom.test.js}

@@ -1,34 +1,37 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
+import {
+	computeDisplayUrl,
+	computeBadges,
+	isHomepage,
+	useLinkPreview,
+} from '../use-link-preview';
 // Mock useRemoteUrlData from block-editor
-const mockUseRemoteUrlData = jest.fn();
-jest.mock( '@wordpress/block-editor', () => ( {
+const mockUseRemoteUrlData = vi.fn();
+
+vi.mock( import( '@wordpress/block-editor' ), () => ( {
 	privateApis: {},
 	store: {},
 } ) );
+
 // Mock the unlock function to return useRemoteUrlData, isHashLink, and isRelativePath
-jest.mock( '../../../lock-unlock', () => ( {
-	unlock: jest.fn( () => ( {
+vi.mock( import( '../../../lock-unlock' ), () => ( {
+	unlock: vi.fn( () => ( {
 		useRemoteUrlData: ( ...args ) => mockUseRemoteUrlData( ...args ),
 		isHashLink: ( url ) => url?.startsWith( '#' ),
 		isRelativePath: ( url ) =>
 			url?.startsWith( '/' ) && ! url?.startsWith( '//' ),
 	} ) ),
 } ) );
-import {
-	computeDisplayUrl,
-	computeBadges,
-	isHomepage,
-	useLinkPreview,
-} from '../use-link-preview';
 
 // Mock @wordpress/data
-jest.mock( '@wordpress/data', () => ( {
-	useSelect: jest.fn(),
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useSelect: vi.fn(),
 } ) );
 
 // Mock @wordpress/core-data
-jest.mock( '@wordpress/core-data', () => ( {
+vi.mock( import( '@wordpress/core-data' ), () => ( {
 	store: {},
 } ) );
 
@@ -448,7 +451,7 @@ it( 'should show "Page" badge for internal custom links', () => {
 
 describe( 'useLinkPreview', () => {
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 		mockUseRemoteUrlData.mockReturnValue( { richData: null } );
 		useSelect.mockReturnValue( null );
 	} );

package/src/navigation-link/test/__snapshots__/{hooks.js.snap → hooks.jsdom.test.js.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
+exports[`hooks > enhanceNavigationLinkVariations > enhances variations with icon and isActive functions 1`] = `
 {
   "extraProp": "extraProp",
   "name": "core/navigation-link",
@@ -66,14 +66,31 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
       },
       "description": "A link to a category.",
       "icon": <SVG
-        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        style={
+          {
+            "fill": "none",
+          }
+        }
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          clipRule="evenodd"
-          d="M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z"
-          fillRule="evenodd"
+          d="M4.75 6C4.75 5.30964 5.30964 4.75 6 4.75H9C9.69036 4.75 10.25 5.30964 10.25 6V9C10.25 9.69036 9.69036 10.25 9 10.25H6C5.30964 10.25 4.75 9.69036 4.75 9V6Z"
+          vectorEffect="non-scaling-stroke"
+        />
+        <Path
+          d="M4.75 15C4.75 14.3096 5.30964 13.75 6 13.75H9C9.69036 13.75 10.25 14.3096 10.25 15V18C10.25 18.6904 9.69036 19.25 9 19.25H6C5.30964 19.25 4.75 18.6904 4.75 18V15Z"
+          vectorEffect="non-scaling-stroke"
+        />
+        <Path
+          d="M13.75 6C13.75 5.30964 14.3096 4.75 15 4.75H18C18.6904 4.75 19.25 5.30964 19.25 6V9C19.25 9.69036 18.6904 10.25 18 10.25H15C14.3096 10.25 13.75 9.69036 13.75 9V6Z"
+          vectorEffect="non-scaling-stroke"
+        />
+        <Path
+          d="M13.75 15C13.75 14.3096 14.3096 13.75 15 13.75H18C18.6904 13.75 19.25 14.3096 19.25 15V18C19.25 18.6904 18.6904 19.25 18 19.25H15C14.3096 19.25 13.75 18.6904 13.75 18V15Z"
+          vectorEffect="non-scaling-stroke"
         />
       </SVG>,
       "isActive": [Function],

package/src/navigation-link/test/block-labelling.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { _x, sprintf } from '@wordpress/i18n';
 
 /**

package/src/navigation-link/test/{hooks.js → hooks.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { __ } from '@wordpress/i18n';
 import { enhanceNavigationLinkVariations } from '../hooks';
 

package/src/navigation-link/variations.js

@@ -0,0 +1,19 @@
+import { __ } from '@wordpress/i18n';
+import { customLink as linkIcon } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'custom-link',
+		title: __( 'Custom Link' ),
+		description: __( 'Add a custom link to your navigation.' ),
+		icon: linkIcon,
+		attributes: {
+			kind: 'custom',
+		},
+		isActive: ( blockAttributes ) => blockAttributes.kind === 'custom',
+		isDefault: true,
+		scope: [ 'inserter' ],
+	},
+];
+
+export default variations;

package/src/navigation-submenu/index.js

@@ -1,14 +1,10 @@
 import { page, addSubmenu } from '@wordpress/icons';
-import { _x, __ } from '@wordpress/i18n';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import { _x } from '@wordpress/i18n';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -48,32 +44,4 @@ export const settings = {
 	transforms,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'label',
-			label: __( 'Label' ),
-			type: 'text',
-			Edit: 'rich-text', //TODO: replace with custom component
-		},
-		{
-			id: 'link',
-			label: __( 'Link' ),
-			type: 'url',
-			Edit: 'link', // TODO: replace with custom component
-			getValue: ( { item } ) => ( {
-				url: item.url,
-				rel: item.rel,
-			} ),
-			setValue: ( { value } ) => ( {
-				url: value.url,
-				rel: value.rel,
-			} ),
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'label', 'link' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/page-list/index.php

@@ -36,8 +36,8 @@ function block_core_page_list_get_submenu_visibility( $context ) {
  *
  * @since 5.8.0
  *
- * @param  array $attributes Block attributes.
- * @param  array $context    Navigation block context.
+ * @param array $attributes Block attributes.
+ * @param array $context    Navigation block context.
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_page_list_build_css_colors( $attributes, $context ) {
@@ -128,14 +128,14 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
  *
  * @since 5.8.0
  *
- * @param string  $submenu_visibility The submenu visibility mode: 'hover', 'click', or 'always'.
- * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
- * @param boolean $is_navigation_child If block is a child of Navigation block.
- * @param array   $nested_pages The array of nested pages.
- * @param boolean $is_nested Whether the submenu is nested or not.
+ * @param string  $submenu_visibility       The submenu visibility mode: 'hover', 'click', or 'always'.
+ * @param boolean $show_submenu_icons       Whether to show submenu indicator icons.
+ * @param boolean $is_navigation_child      If block is a child of Navigation block.
+ * @param array   $nested_pages             The array of nested pages.
+ * @param boolean $is_nested                Whether the submenu is nested or not.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
- * @param array   $colors Color information for overlay styles.
- * @param integer $depth The nesting depth.
+ * @param array   $colors                   Color information for overlay styles.
+ * @param integer $depth                    The nesting depth.
  *
  * @return string List markup.
  */
@@ -227,7 +227,7 @@ function block_core_page_list_render_nested_page_list( $submenu_visibility, $sho
  * @since 5.8.0
  *
  * @param array $current_level The level being iterated through.
- * @param array $children The children grouped by parent post ID.
+ * @param array $children      The children grouped by parent post ID.
  *
  * @return array The nested array of pages.
  */

package/src/page-list/test/{convert-to-navigation-links.js → convert-to-navigation-links.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { convertToNavigationLinks } from '../use-convert-to-navigation-links';
 
 // Expected entity binding structure for navigation links
@@ -12,8 +13,8 @@ const EXPECTED_ENTITY_BINDING = {
 
 // Mock createBlock to avoid creating the blocks in test environment
 // as convertToNavigationLinks calls this method internally.
-jest.mock( '@wordpress/blocks', () => {
-	const blocks = jest.requireActual( '@wordpress/blocks' );
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => {
+	const blocks = await importOriginal();
 
 	return {
 		...blocks,

package/src/paragraph/index.js

@@ -1,15 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { paragraph as icon } from '@wordpress/icons';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import { unlock } from '../lock-unlock';
-
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -56,18 +52,4 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyInspectorFields ) {
-	settings[ fieldsKey ] = [
-		{
-			id: 'content',
-			label: __( 'Content' ),
-			type: 'text',
-			Edit: 'rich-text', // TODO: replace with custom component
-		},
-	];
-	settings[ formKey ] = {
-		fields: [ 'content' ],
-	};
-}
-
 export const init = () => initBlock( { name, metadata, settings } );

package/src/paragraph/style.scss

@@ -42,7 +42,7 @@ p.has-drop-cap.has-background {
 
 // Specificity is reduced to 0-1-0 so global styles can override this.
 :root :where(p.has-background) {
-	padding: $block-bg-padding--v $block-bg-padding--h;
+	padding: $block-bg-padding;
 }
 
 // Use :where to contain the specificity of this rule

package/src/paragraph/use-enter.js

@@ -1,7 +1,6 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
@@ -29,12 +28,12 @@ export function useOnEnter( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
+		function onBeforeInput( event ) {
 			if ( event.defaultPrevented ) {
 				return;
 			}
 
-			if ( event.keyCode !== ENTER ) {
+			if ( event.inputType !== 'insertParagraph' ) {
 				return;
 			}
 
@@ -120,8 +119,16 @@ export function useOnEnter( props ) {
 			} );
 		}
 
-		// Capture phase so we run before writing-flow's ancestor-bubble
-		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
+		// Enter is handled on beforeinput: moving focus while the keydown
+		// is still being handled leaves the iOS keyboard's
+		// auto-capitalization stale. Capture phase so we run before
+		// writing-flow's ancestor-bubble handler that gates on
+		// `event.defaultPrevented`.
+		return subscribeOwnedListener(
+			element,
+			'beforeinput',
+			onBeforeInput,
+			true
+		);
 	}, [] );
 }

package/src/pattern/test/index.js

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it } from 'vitest';
 import {
 	parsePatternDependencies,
 	registerDependency,

package/src/playlist/test/{edit-component.jsx → edit-component.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import PlaylistEdit from '../edit';
@@ -8,7 +9,7 @@ let mediaReplaceFlowProps;
 // test can look at what ended up in the tracklist.
 let mockTracks = [];
 
-jest.mock( '@wordpress/block-editor', () => ( {
+vi.mock( '@wordpress/block-editor', () => ( {
 	store: {},
 	BlockControls: ( { children } ) => <div>{ children }</div>,
 	BlockIcon: () => <span />,
@@ -51,19 +52,19 @@ jest.mock( '@wordpress/block-editor', () => ( {
 	} ),
 } ) );
 
-jest.mock( '@wordpress/blocks', () => ( {
-	createBlock: jest.fn( ( name, attributes ) => ( {
+vi.mock( '@wordpress/blocks', () => ( {
+	createBlock: vi.fn( ( name, attributes ) => ( {
 		name,
 		attributes,
 		clientId: 'new-track',
 	} ) ),
 } ) );
 
-jest.mock( '@wordpress/blob', () => ( {
-	createBlobURL: jest.fn( () => 'blob:track' ),
+vi.mock( '@wordpress/blob', () => ( {
+	createBlobURL: vi.fn( () => 'blob:track' ),
 } ) );
 
-jest.mock( '@wordpress/components', () => ( {
+vi.mock( '@wordpress/components', () => ( {
 	Disabled: ( { children } ) => <div>{ children }</div>,
 	SelectControl: () => <div />,
 	ToggleControl: () => <div />,
@@ -71,33 +72,33 @@ jest.mock( '@wordpress/components', () => ( {
 	__experimentalToolsPanelItem: ( { children } ) => <div>{ children }</div>,
 } ) );
 
-jest.mock( '@wordpress/data', () => ( {
-	useDispatch: jest.fn(),
-	useSelect: jest.fn(),
+vi.mock( '@wordpress/data', () => ( {
+	useDispatch: vi.fn(),
+	useSelect: vi.fn(),
 } ) );
 
-jest.mock( '@wordpress/i18n', () => ( {
+vi.mock( '@wordpress/i18n', () => ( {
 	__: ( text ) => text,
 	_x: ( text ) => text,
 } ) );
 
-jest.mock( '@wordpress/icons', () => ( {
+vi.mock( '@wordpress/icons', () => ( {
 	playlist: 'playlist',
 } ) );
 
-jest.mock( '@wordpress/notices', () => ( {
+vi.mock( '@wordpress/notices', () => ( {
 	store: {},
 } ) );
 
-jest.mock( '../../utils/caption', () => ( {
+vi.mock( '../../utils/caption', () => ( {
 	Caption: () => <figcaption />,
 } ) );
 
-jest.mock( '../../utils/hooks', () => ( {
+vi.mock( '../../utils/hooks', () => ( {
 	useToolsPanelDropdownMenuProps: () => ( {} ),
 } ) );
 
-jest.mock( '../../utils/waveform-player', () => ( {
+vi.mock( '../../utils/waveform-player', () => ( {
 	WaveformPlayer: () => <div />,
 } ) );
 
@@ -141,15 +142,15 @@ describe( 'PlaylistEdit', () => {
 	beforeEach( () => {
 		mediaPlaceholderProps = undefined;
 		mediaReplaceFlowProps = undefined;
-		replaceInnerBlocks = jest.fn();
-		insertBlocks = jest.fn();
-		selectBlock = jest.fn();
+		replaceInnerBlocks = vi.fn();
+		insertBlocks = vi.fn();
+		selectBlock = vi.fn();
 		useDispatch.mockReturnValue( {
-			createErrorNotice: jest.fn(),
+			createErrorNotice: vi.fn(),
 			replaceInnerBlocks,
 			insertBlocks,
 			selectBlock,
-			__unstableMarkNextChangeAsNotPersistent: jest.fn(),
+			__unstableMarkNextChangeAsNotPersistent: vi.fn(),
 		} );
 		trackStore( [
 			{
@@ -170,9 +171,9 @@ describe( 'PlaylistEdit', () => {
 			<PlaylistEdit
 				attributes={ defaultAttributes }
 				clientId="playlist-1"
-				insertBlocksAfter={ jest.fn() }
+				insertBlocksAfter={ vi.fn() }
 				isSelected={ false }
-				setAttributes={ jest.fn() }
+				setAttributes={ vi.fn() }
 			/>
 		);
 
@@ -184,9 +185,9 @@ describe( 'PlaylistEdit', () => {
 			<PlaylistEdit
 				attributes={ defaultAttributes }
 				clientId="playlist-1"
-				insertBlocksAfter={ jest.fn() }
+				insertBlocksAfter={ vi.fn() }
 				isSelected={ false }
-				setAttributes={ jest.fn() }
+				setAttributes={ vi.fn() }
 			/>
 		);
 
@@ -201,9 +202,9 @@ describe( 'PlaylistEdit', () => {
 					showTracklist: false,
 				} }
 				clientId="playlist-1"
-				insertBlocksAfter={ jest.fn() }
+				insertBlocksAfter={ vi.fn() }
 				isSelected={ false }
-				setAttributes={ jest.fn() }
+				setAttributes={ vi.fn() }
 			/>
 		);
 
@@ -233,9 +234,9 @@ describe( 'PlaylistEdit', () => {
 			<PlaylistEdit
 				attributes={ defaultAttributes }
 				clientId="playlist-1"
-				insertBlocksAfter={ jest.fn() }
+				insertBlocksAfter={ vi.fn() }
 				isSelected={ false }
-				setAttributes={ jest.fn() }
+				setAttributes={ vi.fn() }
 			/>
 		);
 
@@ -253,9 +254,9 @@ describe( 'PlaylistEdit', () => {
 			<PlaylistEdit
 				attributes={ defaultAttributes }
 				clientId="playlist-1"
-				insertBlocksAfter={ jest.fn() }
+				insertBlocksAfter={ vi.fn() }
 				isSelected={ false }
-				setAttributes={ jest.fn() }
+				setAttributes={ vi.fn() }
 			/>
 		);
 

package/src/playlist/test/{edit.js → edit.jsdom.test.js}

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