Jest config: use real timers by default (#46714)

* Components: enable fake timers where needed

* Editor: enable fake timers where needed

* Compose: enable fake timers where needed

* Block Editor: enable fake timers where needed

* Edit Post: enable fake timers where needed

* Block Directory: enable fake timers where needed

* Jest config: change timers default from fake to real

packages/block-directory/src/components/downloadable-block-list-item/test/index.js

@@ -15,6 +15,8 @@ import { useSelect } from '@wordpress/data';
 import DownloadableBlockListItem from '../';
 import { plugin } from '../../test/fixtures';
 
+jest.useFakeTimers();
+
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();

packages/block-editor/src/components/alignment-control/test/index.js

@@ -14,6 +14,8 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();

packages/block-editor/src/components/block-alignment-control/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();

packages/block-editor/src/components/block-switcher/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -15,7 +15,8 @@ import { copy } from '@wordpress/icons';
  * Internal dependencies
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
-import { act } from 'react-test-renderer';
+
+jest.useFakeTimers();
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>

packages/block-editor/src/components/block-vertical-alignment-control/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockVerticalAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();

packages/block-editor/src/components/colors/test/with-colors.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { createCustomColorsHOC } from '../with-colors';
 
+jest.useFakeTimers();
+
 describe( 'createCustomColorsHOC', () => {
 	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [

packages/block-editor/src/components/default-block-appender/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();

packages/block-editor/src/components/media-replace-flow/test/index.js

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 function TestWrapper() {

packages/block-editor/src/components/responsive-block-control/test/index.js

@@ -15,6 +15,8 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
+jest.useFakeTimers();
+
 const inputId = 'input-12345678';
 
 const sizeOptions = [

packages/block-editor/src/components/url-input/test/button.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import URLInputButton from '../button';
 
+jest.useFakeTimers();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );

packages/block-editor/src/components/warning/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
+jest.useFakeTimers();
+
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );

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

@@ -14,6 +14,8 @@ 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 () => {

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

@@ -10,6 +10,8 @@ import { act } from 'react-test-renderer';
  */
 import { BorderBoxControl } from '../';
 
+jest.useFakeTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },

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

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 
+jest.useFakeTimers();
+
 const Example = ( extraProps ) => {
 	const [ state, setState ] = useState();
 

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

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;

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

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+jest.useFakeTimers();
+
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
 	{ name: 'green', color: '#0f0' },

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

@@ -8,6 +8,8 @@ import { render, fireEvent } from '@testing-library/react';
  */
 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

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

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
+jest.useFakeTimers();
+
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },

packages/components/src/confirm-dialog/test/index.js

@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ConfirmDialog } from '..';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 describe( 'Confirm', () => {

packages/components/src/date-time/date/test/index.tsx

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
  */
 import DatePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );

packages/components/src/date-time/time/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TimePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup( {

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

@@ -14,6 +14,8 @@ import { plus } from '@wordpress/icons';
  */
 import { DimensionControl } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
 	const instanceId = 1;

packages/components/src/disabled/test/index.tsx

@@ -9,6 +9,8 @@ import { render, screen } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
+jest.useFakeTimers();
+
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">

packages/components/src/dropdown-menu/test/index.js

@@ -15,6 +15,8 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
+jest.useFakeTimers();
+
 describe( 'DropdownMenu', () => {
 	it( 'should not render when neither controls nor children are assigned', () => {
 		render( <DropdownMenu /> );

packages/components/src/dropdown/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Dropdown from '..';
 
+jest.useFakeTimers();
+
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', async () => {
 		const user = userEvent.setup( {

packages/components/src/external-link/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,

packages/components/src/focal-point-picker/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Picker from '..';
 
+jest.useFakeTimers();
+
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
 		it( 'clicking the draggable area should focus it', async () => {

packages/components/src/font-size-picker/test/index.tsx

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
+jest.useFakeTimers();
+
 describe( 'FontSizePicker', () => {
 	test.each( [
 		// Use units when initial value uses units.

packages/components/src/form-file-upload/test/index.tsx

@@ -14,6 +14,8 @@ import FormFileUpload from '..';
  */
 const { File } = window;
 
+jest.useFakeTimers();
+
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {

packages/components/src/form-toggle/test/index.tsx

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import FormToggle, { noop } from '..';
 import type { FormToggleProps } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {

packages/components/src/form-token-field/test/index.tsx

@@ -21,6 +21,8 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
+jest.useFakeTimers();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,

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

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Guide from '../';
 
+jest.useFakeTimers();
+
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide pages={ [] } /> );

packages/components/src/higher-order/with-focus-outside/test/index.js

@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusOutside from '../';
 
+jest.useFakeTimers();
+
 let onFocusOutside;
 
 describe( 'withFocusOutside', () => {

packages/components/src/higher-order/with-focus-return/test/index.js

@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusReturn from '../';
 
+jest.useFakeTimers();
+
 class Test extends Component {
 	render() {
 		const { className, focusHistory } = this.props;

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

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,

packages/components/src/isolated-event-container/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import IsolatedEventContainer from '../';
 
+jest.useFakeTimers();
+
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {
 		const user = userEvent.setup( {

packages/components/src/modal/test/index.tsx

@@ -72,9 +72,7 @@ describe( 'Modal', () => {
 	} );
 
 	it( 'should call onRequestClose when the escape key is pressed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onRequestClose = jest.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>

packages/components/src/navigable-container/test/navigable-menu.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { NavigableMenu } from '../menu';
 
+jest.useFakeTimers();
+
 const NavigableMenuTestCase = ( props ) => (
 	<NavigableMenu { ...props }>
 		<button>Item 1</button>

packages/components/src/navigable-container/test/tababble-container.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { TabbableContainer } from '../tabbable';
 
+jest.useFakeTimers();
+
 const TabbableContainerTestCase = ( props ) => (
 	<TabbableContainer { ...props }>
 		<button>Item 1</button>

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

@@ -16,6 +16,8 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
+jest.useFakeTimers();
+
 const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>

packages/components/src/navigator/test/index.tsx

@@ -20,6 +20,8 @@ import {
 	NavigatorBackButton,
 } from '..';
 
+jest.useFakeTimers();
+
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
 	return {

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

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+jest.useFakeTimers();
+
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );

packages/components/src/panel/test/body.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PanelBody } from '../body';
 
+jest.useFakeTimers();
+
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {