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

package/src/components/global-styles/inheritance/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { click } from '@ariakit/test';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
@@ -7,6 +8,8 @@ import {
 	InheritanceToolsPanelItem,
 } from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'InheritanceResetButton', () => {
 	test( 'renders an always-visible reset button labelled for the inherited value', () => {
 		render( <InheritanceResetButton onResetToInherited={ () => {} } /> );
@@ -18,7 +21,7 @@ describe( 'InheritanceResetButton', () => {
 	} );
 
 	test( 'invokes the reset handler when activated', async () => {
-		const onResetToInherited = jest.fn();
+		const onResetToInherited = vi.fn();
 		render(
 			<InheritanceResetButton onResetToInherited={ onResetToInherited } />
 		);
@@ -230,7 +233,7 @@ describe( 'InheritanceToolsPanelItem local-override reset dot', () => {
 	} );
 
 	test( 'the reset dot invokes the deselect handler', async () => {
-		const onDeselect = jest.fn();
+		const onDeselect = vi.fn();
 		renderItem( { hasLocalOverride: true, onDeselect } );
 		await click(
 			screen.getByRole( 'button', { name: 'Reset to inherited value' } )

package/src/components/global-styles/test/{background-panel.jsx → background-panel.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BackgroundPanel, {
@@ -7,6 +8,10 @@ import BackgroundPanel, {
 	hasLegacyColorGradientValue,
 } from '../background-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -165,7 +170,7 @@ describe( 'BackgroundPanel — duplicate gradient preset slug identity', () => {
 
 	it( 'commits the inherited preset slug when accepting the preselected inherited gradient', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BackgroundPanel
@@ -202,7 +207,7 @@ describe( 'BackgroundPanel — duplicate gradient preset slug identity', () => {
 				} }
 				inheritedValue={ {} }
 				settings={ duplicateGradientSettings }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				panelId="test-panel"
 			/>
 		);
@@ -256,7 +261,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 						'linear-gradient(135deg, rgb(74, 0, 224) 0%, rgb(142, 45, 226) 100%)',
 				},
 			};
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<BackgroundPanel
@@ -322,7 +327,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 					},
 				},
 			};
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<BackgroundPanel
@@ -365,7 +370,7 @@ describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
 					},
 				},
 			};
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<BackgroundPanel

package/src/components/global-styles/test/{border-panel.jsx → border-panel.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BorderPanel from '../border-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -53,6 +56,103 @@ const settingsAll = {
 	},
 };
 
+const shadowOnlySettings = { shadow: settingsAll.shadow };
+const borderOnlySettings = { border: settingsAll.border };
+
+describe( 'BorderPanel — panel and control labels', () => {
+	it( 'titles the panel "Borders" when border and shadow controls are available', () => {
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ settingsAll }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Borders' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'titles the panel "Borders" when only a shadow control is available', () => {
+		// A shadow is treated as a soft border, so the title does not change
+		// with whichever controls a theme or block opts into. A stable title
+		// is what lets each control keep its own visible label.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', { name: 'Borders' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'labels the border control, and puts its unlink toggle in that label row, when no shadow control is available', () => {
+		// The case that motivated the change: with no Shadow control to
+		// disambiguate it from, the Border label used to be hidden, which left
+		// its unlink toggle beside the inputs while the Radius one sat in a
+		// label row. Both now share the same layout.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ borderOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( screen.getByText( 'Border' ) ).toBeInTheDocument();
+
+		// `getAllByRole` returns document order, so the toggle preceding the
+		// border color/style picker is what places it in the label row rather
+		// than alongside the inputs.
+		const buttons = screen.getAllByRole( 'button' );
+		expect(
+			buttons.indexOf( screen.getByLabelText( 'Unlink sides' ) )
+		).toBeLessThan(
+			buttons.indexOf(
+				screen.getByLabelText( /Border color( and style)* picker/ )
+			)
+		);
+	} );
+
+	it( 'labels the border control when the inheritance indicators are off', () => {
+		// Global Styles renders the panel without the inheritance treatment.
+		// That used to be the other half of the condition hiding the label, so
+		// a border-only panel showed no label there either.
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ borderOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+				showInheritanceLabelIndicators={ false }
+			/>
+		);
+
+		expect( screen.getByText( 'Border' ) ).toBeInTheDocument();
+	} );
+
+	it( 'labels the shadow control even when no border control is available', () => {
+		render(
+			<BorderPanel
+				value={ {} }
+				settings={ shadowOnlySettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( screen.getByText( 'Shadow' ) ).toBeInTheDocument();
+	} );
+} );
+
 describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 	describe( 'Border radius (input archetype)', () => {
 		it( 'renders an inherited string radius as the displayed value when local is empty', () => {
@@ -125,7 +225,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 
 		it( 'does not invoke onChange on mount when only an inherited radius is present (display-without-commit)', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = { border: { radius: '8px' } };
 
 			render(
@@ -143,7 +243,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 
 		it( 'commits a typed local radius override without copying any inherited values (strip-not-copy)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: { radius: '8px' },
 				shadow: 'var:preset|shadow|soft',
@@ -172,7 +272,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 
 		it( 'does not bake the inherited border color/style/width into the local override when only a radius is set', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: {
 					color: '#000000',
@@ -252,7 +352,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 			// renders the blue dot) even though the user never
 			// customised the radius.
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: {
 					color: '#000000',
@@ -289,7 +389,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 
 		it( 'does not invoke onChange on mount when only an inherited border is present', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				border: {
 					color: '#000000',
@@ -337,7 +437,7 @@ describe( 'BorderPanel — inherited Global Styles label treatment', () => {
 		} );
 
 		it( 'does not invoke onChange on mount when only an inherited shadow is present', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const inheritedValue = {
 				shadow: 'var:preset|shadow|soft',
 			};
@@ -463,7 +563,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists a theme preset as a preset reference when custom presets also exist', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -487,7 +587,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists a default preset as a preset reference when custom presets also exist', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -511,7 +611,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists a custom preset as a preset reference', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -535,7 +635,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'persists the unset entry as a literal value, not a preset reference', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -556,7 +656,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'does not reference default presets the theme has opted out of', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<BorderPanel
@@ -591,7 +691,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'offers only the most specific preset when a slug is defined twice', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		// Custom preset slugs are generated as `shadow-<n>` from the custom
 		// presets alone, so they can collide with a theme preset's slug.
@@ -637,7 +737,7 @@ describe( 'BorderPanel — shadow preset persistence', () => {
 
 	it( 'references the most specific origin when two presets share a value', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		// A custom preset starts out with the same value as the `natural`
 		// default one, so this is the state right after adding one.

package/src/components/global-styles/test/{color-panel.jsx → color-panel.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { render, renderHook, screen } from '@testing-library/react';
 import { click, render as renderAriakit } from '@ariakit/test/react';
 import ColorPanel, {
@@ -10,6 +11,10 @@ import ColorPanel, {
 	useHasCaptionPanel,
 } from '../color-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.

package/src/components/global-styles/test/{dimensions-panel.jsx → dimensions-panel.jsdom.test.jsx}

@@ -1,8 +1,11 @@
-/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectLocalOverride", "expectPlaceholderState"] }] */
-import { render, screen, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useState } from '@wordpress/element';
 import DimensionsPanel from '../dimensions-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -19,11 +22,11 @@ afterEach( () => {
 // full set of inherited and selectable ratios without spinning up a
 // store registry. Per-call resolution lets the same mock answer all
 // of the paths the tool requests on a single render.
-jest.mock( '../../use-settings', () => {
-	const actual = jest.requireActual( '../../use-settings' );
+vi.mock( import( '../../use-settings' ), async ( importOriginal ) => {
+	const actual = await importOriginal();
 	return {
 		...actual,
-		useSettings: jest.fn( ( ...paths ) =>
+		useSettings: vi.fn( ( ...paths ) =>
 			paths.map( ( path ) => {
 				switch ( path ) {
 					case 'dimensions.aspectRatios.default':
@@ -247,7 +250,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 
 		it( 'commits a local contentSize override on user input without copying any inherited value into other paths (strip-not-copy)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			renderPanel( {
 				value: {},
@@ -540,7 +543,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 		} );
 
 		it( 'does not call `onChange` on mount of an at-rest minHeight', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			renderPanel( {
 				value: {},
 				inheritedValue: { dimensions: { minHeight: '320px' } },
@@ -553,7 +556,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 
 		it( 'commits a local minHeight override on user input without copying any inherited value into other paths', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			renderPanel( {
 				value: {},
@@ -612,7 +615,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 		} );
 
 		it( 'does not call `onChange` on mount of an at-rest aspectRatio', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			renderPanel( {
 				value: {},
 				inheritedValue: { dimensions: { aspectRatio: '16/9' } },
@@ -625,7 +628,7 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 
 		it( 'commits a local aspectRatio override on user selection of a different option without copying any inherited value into other paths', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			renderPanel( {
 				value: {},
@@ -735,13 +738,10 @@ describe( 'DimensionsPanel — per-control placeholder pattern', () => {
 		} );
 
 		it( '(padding) commits to local on slider activation and the displayed value follows the new local value', () => {
-			const { fireEvent } = require( '@testing-library/react' );
-
 			// Controlled wrapper so we can verify the slider follows local
 			// value updates after onChange writes through.
 			function Wrapper() {
-				const [ value, setValue ] =
-					require( '@wordpress/element' ).useState( {} );
+				const [ value, setValue ] = useState( {} );
 				return (
 					<DimensionsPanel
 						value={ value }

package/src/components/global-styles/test/{filters-panel.jsx → filters-panel.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import FiltersPanel from '../filters-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // The inheritance treatment sits behind the
 // `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
 // tests exercise the inheriting path.
@@ -101,7 +104,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 	} );
 
 	it( 'does not invoke onChange on mount when only inherited duotone is present (display-without-commit)', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const inheritedValue = {
 			filter: { duotone: [ '#000000', '#ffffff' ] },
 		};
@@ -121,7 +124,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 
 	it( 'commits the inherited value when the user clicks the preselected duotone preset', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const inheritedValue = {
 			filter: { duotone: [ '#000000', '#ffffff' ] },
 		};
@@ -167,7 +170,7 @@ describe( 'FiltersPanel — visual treatment and display-without-commit', () =>
 	} );
 
 	it( 'does not invoke onChange on mount when a local duotone is set (no spurious commit)', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const value = {
 			filter: { duotone: [ '#8c00b7', '#fcff41' ] },
 		};
@@ -247,7 +250,7 @@ describe( 'FiltersPanel — duplicate duotone presets', () => {
 
 	it( 'saves the slug of the preset that was picked', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<FiltersPanel

package/src/components/global-styles/test/{inherited-value-context-core.js → inherited-value-context-core.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { useResolvedStyle } from '../inherited-value-context';
@@ -19,28 +20,28 @@ afterEach( () => {
 
 // Only `useSelect` is called by the hook. The other four are needed at import
 // time by the store modules this file pulls in transitively.
-jest.mock( '@wordpress/data', () => ( {
-	useSelect: jest.fn(),
-	register: jest.fn(),
-	createReduxStore: jest.fn(),
-	createSelector: jest.fn( ( callback ) => callback ),
-	combineReducers: jest.fn( ( reducers ) => reducers ),
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useSelect: vi.fn(),
+	register: vi.fn(),
+	createReduxStore: vi.fn(),
+	createSelector: vi.fn( ( callback ) => callback ),
+	combineReducers: vi.fn( ( reducers ) => reducers ),
 } ) );
 
-jest.mock( '../../../store', () => ( {
+vi.mock( import( '../../../store' ), () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
 // `inherited-value-context.jsx` imports the blocks store for
 // `useVariationAndElements`. Its real import chain needs data-module exports
 // the stub above does not provide, so stub the blocks module too.
-jest.mock( '@wordpress/blocks', () => ( {
+vi.mock( import( '@wordpress/blocks' ), () => ( {
 	store: { name: 'core/blocks' },
 	getBlockType: ( blockName ) =>
 		( { 'core/heading': { title: 'Heading' } } )[ blockName ],
 } ) );
 
-jest.mock( '../../../hooks/block-style-variation', () => ( {
+vi.mock( import( '../../../hooks/block-style-variation' ), () => ( {
 	getVariationNameFromClass: ( className ) => {
 		const match = /is-style-([\w-]+)/.exec( className || '' );
 		return match ? match[ 1 ] : null;

package/src/components/global-styles/test/{inherited-value-context.jsx → inherited-value-context.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { useResolvedStyle } from '../inherited-value-context';
@@ -16,23 +17,23 @@ afterEach( () => {
 	delete window.__experimentalGlobalStylesInheritanceUI;
 } );
 
-jest.mock( '@wordpress/data', () => ( {
-	useSelect: jest.fn(),
-	useDispatch: jest.fn( () => ( {} ) ),
-	useRegistry: jest.fn( () => ( {} ) ),
-	createSelector: jest.fn( ( callback ) => callback ),
-	createReduxStore: jest.fn(),
-	createRegistry: jest.fn(),
-	register: jest.fn(),
-	select: jest.fn(),
-	dispatch: jest.fn(),
-	combineReducers: jest.fn( ( reducers ) => reducers ),
-	subscribe: jest.fn(),
+vi.mock( import( '@wordpress/data' ), () => ( {
+	useSelect: vi.fn(),
+	useDispatch: vi.fn( () => ( {} ) ),
+	useRegistry: vi.fn( () => ( {} ) ),
+	createSelector: vi.fn( ( callback ) => callback ),
+	createReduxStore: vi.fn(),
+	createRegistry: vi.fn(),
+	register: vi.fn(),
+	select: vi.fn(),
+	dispatch: vi.fn(),
+	combineReducers: vi.fn( ( reducers ) => reducers ),
+	subscribe: vi.fn(),
 	RegistryProvider: ( { children } ) => children,
 	RegistryConsumer: ( { children } ) => children( {} ),
 	AsyncModeProvider: ( { children } ) => children,
-	useRegistrySelect: jest.fn(),
-	useRegistryDispatch: jest.fn( () => ( {} ) ),
+	useRegistrySelect: vi.fn(),
+	useRegistryDispatch: vi.fn( () => ( {} ) ),
 	withSelect: ( mapStateToProps ) => ( Component ) => ( props ) =>
 		Component( {
 			...props,
@@ -42,7 +43,7 @@ jest.mock( '@wordpress/data', () => ( {
 	withRegistry: ( Component ) => Component,
 } ) );
 
-jest.mock( '../../../store', () => ( {
+vi.mock( import( '../../../store' ), () => ( {
 	store: { name: 'core/block-editor' },
 } ) );
 
@@ -51,7 +52,7 @@ jest.mock( '../../../store', () => ( {
 // transitive import chain fails under this file's `@wordpress/data` mock
 // (missing `createSelector`), so stub the blocks module with just the shape
 // needed.
-jest.mock( '@wordpress/blocks', () => ( {
+vi.mock( import( '@wordpress/blocks' ), () => ( {
 	store: { name: 'core/blocks' },
 	getBlockType: ( blockName ) =>
 		( {
@@ -65,7 +66,7 @@ jest.mock( '@wordpress/blocks', () => ( {
 // `className`; map `is-style-<slug>` to `<slug>` for these tests. The
 // variation-ref resolution itself now lives in `resolveStyle`
 // (`@wordpress/global-styles-engine`) and is covered by its own tests.
-jest.mock( '../../../hooks/block-style-variation', () => ( {
+vi.mock( import( '../../../hooks/block-style-variation' ), () => ( {
 	getVariationNameFromClass: ( className ) => {
 		const match = /is-style-([\w-]+)/.exec( className || '' );
 		return match ? match[ 1 ] : null;

package/src/components/global-styles/test/{state-control-badges.jsx → state-control-badges.jsdom.test.jsx}

@@ -1,8 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import StateControlBadges from '../state-control-badges';
 
-jest.mock( '@wordpress/ui', () => {
-	const actual = jest.requireActual( '@wordpress/ui' );
+vi.mock( import( '@wordpress/ui' ), async ( importOriginal ) => {
+	const actual = await importOriginal();
 
 	return {
 		...actual,

package/src/components/global-styles/test/{typography-panel-core.jsx → typography-panel-core.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { click, render as renderAriakit } from '@ariakit/test/react';
 import TypographyPanel from '../typography-panel';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // Coverage for `TypographyPanel` with the `gutenberg-global-styles-inheritance-ui`
 // experiment off, which is what WordPress Core gets. Deleted rather than set to
 // `false`, because an experiment that was never turned on leaves the global
@@ -99,7 +102,7 @@ describe( 'TypographyPanel — experiment off', () => {
 				inheritedValue={ { color: { text: 'var:preset|color|red' } } }
 				settings={ PALETTE_SETTINGS }
 				panelId="test"
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 			/>
 		);
 
@@ -116,7 +119,7 @@ describe( 'TypographyPanel — experiment off', () => {
 
 describe( 'TypographyPanel — experiment off, setTextColor link sync', () => {
 	async function pickRed( value, inheritedValue ) {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		await renderAriakit(
 			<TypographyPanel
 				value={ value }