@wordpress/components 40.0.0 → 40.1.0

package/src/form-token-field/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,4 +1,4 @@
-/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectTokensToBeInTheDocument", "expectTokensNotToBeInTheDocument", "expectVisibleSuggestionsToBe", "expectEscapedProperly"] }] */
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
 	render,
 	screen,
@@ -12,6 +12,10 @@ import { useState } from '@wordpress/element';
 import { logged } from '@wordpress/deprecated';
 import FormTokenField from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockScrollIntoView();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
@@ -119,7 +123,7 @@ describe( 'FormTokenField', () => {
 		it( "should add tokens with the input's value when pressing the enter key", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onChange={ onChangeSpy } /> );
 
@@ -144,7 +148,7 @@ describe( 'FormTokenField', () => {
 		it( "should add a token with the input's value when pressing the comma key", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onChange={ onChangeSpy } /> );
 
@@ -160,7 +164,7 @@ describe( 'FormTokenField', () => {
 		it( 'should add a token with the input value when pressing the space key and the `tokenizeOnSpace` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -204,7 +208,7 @@ describe( 'FormTokenField', () => {
 		it( 'should add a token with the input value with onBlur when `tokenizeOnBlur` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -239,7 +243,7 @@ describe( 'FormTokenField', () => {
 		it( "should not add a token with the input's value when tokenizeOnBlur is not set and pressing the tab key", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onChange={ onChangeSpy } /> );
 
@@ -255,7 +259,7 @@ describe( 'FormTokenField', () => {
 		it( 'should remove the last token when pressing the backspace key', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -283,7 +287,7 @@ describe( 'FormTokenField', () => {
 		it( 'should remove a token when clicking the token\'s "remove" button', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -325,7 +329,7 @@ describe( 'FormTokenField', () => {
 		it( 'should remove a token when by focusing on the token\'s "remove" button and pressing space bar', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -360,7 +364,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not add a new token if a token with the same value already exists', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -387,7 +391,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not add a new token if the text input is blank', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -407,7 +411,7 @@ describe( 'FormTokenField', () => {
 		it( 'should allow moving the cursor through the tokens when pressing the arrow keys, and should remove the token in front of the cursor when pressing the delete key', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -534,7 +538,7 @@ describe( 'FormTokenField', () => {
 		it( 'should fire the `onFocus` callback when the input is focused', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onFocus={ onFocusSpy } /> );
 
@@ -556,7 +560,7 @@ describe( 'FormTokenField', () => {
 		it( "should fire the `onInputChange` callback when the input's value changes", async () => {
 			const user = userEvent.setup();
 
-			const onInputChangeSpy = jest.fn();
+			const onInputChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState onInputChange={ onInputChangeSpy } />
@@ -674,7 +678,7 @@ describe( 'FormTokenField', () => {
 		it( "should use the value of the `placeholder` prop as the input's placeholder only when there are no tokens", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -703,7 +707,7 @@ describe( 'FormTokenField', () => {
 		it( 'should handle accents and special characters in tokens and input value', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -748,7 +752,7 @@ describe( 'FormTokenField', () => {
 		it( 'should render suggestions when receiving focus if the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Cobalt', 'Blue', 'Octane' ];
 
@@ -791,7 +795,7 @@ describe( 'FormTokenField', () => {
 		it( 'should render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -823,7 +827,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `false` or not defined', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -854,7 +858,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not render suggestions after the input is blurred', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -951,7 +955,7 @@ describe( 'FormTokenField', () => {
 		it( 'should allow the user to use the keyboard to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [
 				'Pink',
@@ -1027,10 +1031,48 @@ describe( 'FormTokenField', () => {
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 		} );
 
+		it( 'should select the last suggestion when pressing the up arrow with no suggestion selected', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [ 'Pink', 'Salmon', 'Carnation', 'Neon' ];
+
+			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Typing "on" will show the "Salmon", "Carnation" and "Neon" suggestions
+			await user.type( input, 'on' );
+
+			const suggestionList = screen.getByRole( 'listbox' );
+
+			expectVisibleSuggestionsToBe( suggestionList, [
+				'Salmon',
+				'Carnation',
+				'Neon',
+			] );
+
+			// Currently, none of the suggestions are selected
+			expect(
+				within( suggestionList ).queryByRole( 'option', {
+					selected: true,
+				} )
+			).not.toBeInTheDocument();
+
+			// Pressing the up arrow from an empty selection wraps to the end of
+			// the list and selects "Neon"
+			await user.keyboard( '[ArrowUp]' );
+
+			expect(
+				within( suggestionList ).getByRole( 'option', {
+					selected: true,
+				} )
+			).toHaveAccessibleName( 'Neon' );
+		} );
+
 		it( 'should allow the user to use the mouse to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Tiger', 'Tangerine', 'Orange' ];
 
@@ -1100,7 +1142,7 @@ describe( 'FormTokenField', () => {
 		it( 'should hide the suggestion list when the Escape key is pressed', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Black', 'Ash', 'Onyx', 'Ebony' ];
 
@@ -1453,7 +1495,7 @@ describe( 'FormTokenField', () => {
 		it( 'should accept tokens in their object format', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1493,8 +1535,8 @@ describe( 'FormTokenField', () => {
 		it( 'should trigger mouse callbacks if the `onMouseEnter` and/or the `onMouseLeave` properties are set on a token data object', async () => {
 			const user = userEvent.setup();
 
-			const onMouseEnterSpy = jest.fn();
-			const onMouseLeaveSpy = jest.fn();
+			const onMouseEnterSpy = vi.fn();
+			const onMouseLeaveSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -1575,7 +1617,7 @@ describe( 'FormTokenField', () => {
 		it( "by default, it should trim the input's value from extra white spaces before attempting to add it as a token", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1639,7 +1681,7 @@ describe( 'FormTokenField', () => {
 		it( "should allow to modify the input's value when saving it as a token", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1702,7 +1744,7 @@ describe( 'FormTokenField', () => {
 		it( 'is applied to the search value when matching it against the list of suggestions', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Expensive food', 'Free food' ];
 
@@ -1740,7 +1782,7 @@ describe( 'FormTokenField', () => {
 		it( 'should allow to modify the text rendered in the browser for each token', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1796,7 +1838,7 @@ describe( 'FormTokenField', () => {
 		it( "is applied to each suggestions, but doesn't influence the matching against the search value", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Hot coffee', 'Hot tea' ];
 
@@ -1874,7 +1916,7 @@ describe( 'FormTokenField', () => {
 		it( 'should add a token only if it passes the validation set via `__experimentalValidateInput`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -1917,8 +1959,8 @@ describe( 'FormTokenField', () => {
 		it( 'should still preventDefault on Enter when validation rejects the value', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
-			const onSubmitSpy = jest.fn( ( e: React.FormEvent ) =>
+			const onChangeSpy = vi.fn();
+			const onSubmitSpy = vi.fn( ( e: React.FormEvent ) =>
 				e.preventDefault()
 			);
 			const startsWithCapitalLetter = ( tokenText: string ) =>
@@ -1946,7 +1988,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not preventDefault on space when validation fails and `tokenizeOnSpace` is true', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -1984,7 +2026,7 @@ describe( 'FormTokenField', () => {
 		it( 'should filter out invalid tokens when pasting with separators', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2012,7 +2054,7 @@ describe( 'FormTokenField', () => {
 		it( 'should leave all segments in the input when none pass validation on paste', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2035,7 +2077,7 @@ describe( 'FormTokenField', () => {
 		it( 'should commit a trailing valid segment and leave only failed segments in the input when pasting without a trailing separator', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2059,7 +2101,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -2081,7 +2123,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values with `__experimentalValidateInput`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2108,7 +2150,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not allow adding new tokens beyond the value defined by the `maxLength` prop', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -2176,7 +2218,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not affect tokens that were added before the limit was imposed', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -2219,7 +2261,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not allow adding tokens when the `disabled` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -2247,7 +2289,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not allow removing tokens when the `disable` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState

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

@@ -1,7 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import GradientPicker from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const GRADIENT_A =
 	'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)';
 const GRADIENT_B =
@@ -15,7 +18,7 @@ const DUPLICATE_GRADIENTS = [
 describe( 'GradientPicker', () => {
 	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(
 			<GradientPicker
 				aria-label="Gradients"
@@ -51,7 +54,7 @@ describe( 'GradientPicker', () => {
 			<GradientPicker
 				aria-label="Gradients"
 				gradients={ DUPLICATE_GRADIENTS }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				asButtons={ false }
 				presentation="command-buttons"
 				disableCustomGradients
@@ -76,7 +79,7 @@ describe( 'GradientPicker', () => {
 				gradients={ DUPLICATE_GRADIENTS }
 				value={ GRADIENT_A }
 				selectedSlug="dark-background"
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 				asButtons
 				disableCustomGradients
 				clearable={ false }
@@ -104,7 +107,7 @@ describe( 'GradientPicker', () => {
 					aria-label="Gradient"
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ undefined }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -119,7 +122,7 @@ describe( 'GradientPicker', () => {
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ GRADIENT_A }
 					selectedSlug="dark-text"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -136,7 +139,7 @@ describe( 'GradientPicker', () => {
 					aria-label="Gradient"
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ GRADIENT_A }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -153,7 +156,7 @@ describe( 'GradientPicker', () => {
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ GRADIENT_A }
 					selectedSlug=""
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -165,7 +168,7 @@ describe( 'GradientPicker', () => {
 
 		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(
 				<GradientPicker
@@ -190,7 +193,7 @@ describe( 'GradientPicker', () => {
 
 		it( 'should pass slug as third argument to onChange for multiple-origin gradients', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<GradientPicker

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

@@ -1,6 +1,8 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Guide from '..';
+globalThis.wpVitest.mockMatchMedia();
 
 const defaultProps = {
 	onFinish: () => {},
@@ -92,7 +94,7 @@ describe( 'Guide', () => {
 
 	it( 'calls onFinish when the finish button is clicked', async () => {
 		const user = userEvent.setup();
-		const onFinish = jest.fn();
+		const onFinish = vi.fn();
 		render(
 			<Guide
 				{ ...defaultProps }
@@ -107,7 +109,7 @@ describe( 'Guide', () => {
 
 	it( 'calls onFinish when the modal is closed', async () => {
 		const user = userEvent.setup();
-		const onFinish = jest.fn();
+		const onFinish = vi.fn();
 		render(
 			<Guide
 				{ ...defaultProps }

package/src/h-stack/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[`props should render alignment 1`] = `
+exports[`props > should render alignment 1`] = `
 <div>
   <div
     class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
@@ -14,7 +14,7 @@ exports[`props should render alignment 1`] = `
 </div>
 `;
 
-exports[`props should render correctly 1`] = `
+exports[`props > should render correctly 1`] = `
 <div>
   <div
     class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
@@ -28,7 +28,7 @@ exports[`props should render correctly 1`] = `
 </div>
 `;
 
-exports[`props should render spacing 1`] = `
+exports[`props > should render spacing 1`] = `
 <div>
   <div
     class="style-flex style-items-row style-expanded-row components-flex components-h-stack"

package/src/h-stack/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { View } from '../../view';
 import { HStack } from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render(

package/src/higher-order/with-fallback-styles/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 withFallbackStyles from '..';
 
@@ -9,7 +10,7 @@ describe( 'withFallbackStyles', () => {
 	it( 'derives the fallback styles from the provided node prop', () => {
 		const node = document.createElement( 'span' );
 		node.dataset.color = 'rgb(1, 2, 3)';
-		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+		const mapNodeToProps = vi.fn( ( el: HTMLElement ) => ( {
 			fallbackColor: el.dataset.color,
 		} ) );
 		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );
@@ -25,7 +26,7 @@ describe( 'withFallbackStyles', () => {
 	} );
 
 	it( 'derives the fallback styles from the internal wrapper node when no node prop is given', () => {
-		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+		const mapNodeToProps = vi.fn( ( el: HTMLElement ) => ( {
 			fallbackColor: el.tagName.toLowerCase(),
 		} ) );
 		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );

package/src/higher-order/with-filters/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`withFilters > should display a component overridden by the filter 1`] = `
+<div>
+  <div>
+    Overridden component
+  </div>
+</div>
+`;
+
+exports[`withFilters > should display original component when no filters applied 1`] = `
+<div>
+  <div>
+    My component
+  </div>
+</div>
+`;
+
+exports[`withFilters > should display two components composed by the filter 1`] = `
+<div>
+  <div>
+    <div>
+      My component
+    </div>
+    <div>
+      Composed component
+    </div>
+  </div>
+</div>
+`;
+
+exports[`withFilters > should not re-render component when new filter added before component was mounted 1`] = `
+<div>
+  <blockquote>
+    <div>
+      Spied component
+    </div>
+  </blockquote>
+</div>
+`;
+
+exports[`withFilters > should re-render both components once each when one filter added 1`] = `
+<div>
+  <section>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+  </section>
+</div>
+`;
+
+exports[`withFilters > should re-render component once when new filter added after component was mounted 1`] = `
+<div>
+  <blockquote>
+    <div>
+      Spied component
+    </div>
+  </blockquote>
+</div>
+`;
+
+exports[`withFilters > should re-render component once when two filters added in the same animation frame 1`] = `
+<div>
+  <section>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+  </section>
+</div>
+`;
+
+exports[`withFilters > should re-render component twice when new filter added and removed in two different animation frames 1`] = `
+<div>
+  <div>
+    Spied component
+  </div>
+</div>
+`;