Components: Use real timers where possible

packages/components/src/autocomplete/test/index.js

@@ -14,14 +14,10 @@ import { useRef } from '@wordpress/element';
  */
 import { getAutoCompleterUI } from '../autocompleter-ui';
 
-jest.useFakeTimers();
-
 describe( 'AutocompleterUI', () => {
 	describe( 'click outside behavior', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const resetSpy = jest.fn();
 

packages/components/src/box-control/test/index.js

@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 
-jest.useFakeTimers();
-
 const Example = ( extraProps ) => {
 	const [ state, setState ] = useState();
 
@@ -39,9 +37,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should update values when interacting with input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <BoxControl /> );
 
@@ -63,9 +59,7 @@ describe( 'BoxControl', () => {
 
 	describe( 'Reset', () => {
 		it( 'should reset values when clicking Reset', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <BoxControl /> );
 
@@ -89,9 +83,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <Example /> );
 
@@ -115,9 +107,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <Example /> );
 
@@ -141,9 +131,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should persist cleared value when focus changes', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const spyChange = jest.fn();
 
 			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
@@ -179,9 +167,7 @@ describe( 'BoxControl', () => {
 
 	describe( 'Unlinked sides', () => {
 		it( 'should update a single side value when unlinked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <Example /> );
 
@@ -216,9 +202,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should update a whole axis when value is changed when unlinked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <Example splitOnAxis /> );
 
@@ -251,9 +235,7 @@ describe( 'BoxControl', () => {
 
 	describe( 'Unit selections', () => {
 		it( 'should update unlinked controls unit selection based on all input control', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			// Render control.
 			render( <BoxControl /> );
@@ -285,9 +267,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should use individual side attribute unit when available', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			// Render control.
 			const { rerender } = render( <BoxControl /> );
@@ -337,9 +317,7 @@ describe( 'BoxControl', () => {
 
 	describe( 'onChange updates', () => {
 		it( 'should call onChange when values contain more than just CSS units', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const setState = jest.fn();
 
 			render( <BoxControl onChange={ setState } /> );
@@ -361,9 +339,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should not pass invalid CSS unit only values to onChange', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const setState = jest.fn();
 
 			render( <BoxControl onChange={ setState } /> );

packages/components/src/checkbox-control/test/index.tsx

@@ -15,8 +15,6 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
-jest.useFakeTimers();
-
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
@@ -85,9 +83,7 @@ describe( 'CheckboxControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should flip the checked property when clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = false;
 			const setState = jest.fn(

packages/components/src/color-palette/test/index.tsx

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
-jest.useFakeTimers();
-
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
 	{ name: 'green', color: '#0f0' },
@@ -54,9 +52,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should call onClick on an active button with undefined', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 
 		render(
@@ -76,9 +72,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should call onClick on an inactive button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 
 		render(
@@ -104,9 +98,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 
 		render(
@@ -139,9 +131,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should render dropdown and its content', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 
 		render(

packages/components/src/color-picker/test/index.js

@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '..';
 
-jest.useFakeTimers();
-
 /**
  * Ordinarily we'd try to select the compnoent by role but the silder role appears
  * on several elements and we'd end up encoding assumptions about order when
@@ -43,12 +41,6 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
 
-const sleep = ( ms ) => {
-	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
-	jest.advanceTimersByTime( ms + 1 );
-	return promise;
-};
-
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -95,8 +87,9 @@ describe( 'ColorPicker', () => {
 				{ pageX: 10, pageY: 10 }
 			);
 
-			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-			await sleep( 1 );
+			await waitFor( () =>
+				expect( onChangeComplete ).toHaveBeenCalled()
+			);
 
 			expect( onChangeComplete ).toHaveBeenCalledWith(
 				legacyColorMatcher
@@ -119,8 +112,7 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
+		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
 
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
@@ -152,8 +144,7 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
+		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
 
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )

packages/components/src/combobox-control/test/index.js

@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
-jest.useFakeTimers();
-
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },
@@ -56,10 +54,7 @@ const getInput = ( name ) => screen.getByRole( 'combobox', { name } );
 const getOption = ( name ) => screen.getByRole( 'option', { name } );
 const getAllOptions = () => screen.getAllByRole( 'option' );
 const getOptionSearchString = ( option ) => option.label.substring( 0, 11 );
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 const ControlledComboboxControl = ( {
 	value: valueProp,