From f49cf969371bd4ecc2ec9afdb4aa2bce64cd5966 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Thu, 11 Aug 2022 16:03:48 +0300
Subject: [PATCH 1/2] Components: Refactor Guide PageControl tests to
 @testing-library/react

---
 .../components/src/guide/test/page-control.js | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/guide/test/page-control.js b/packages/components/src/guide/test/page-control.js
index cc9509e8be5c0..2f9468e058772 100644
--- a/packages/components/src/guide/test/page-control.js
+++ b/packages/components/src/guide/test/page-control.js
@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -15,29 +11,28 @@ import PageControl from '../page-control';
 
 describe( 'PageControl', () => {
 	it( 'renders an empty list when there are no pages', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 0 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 0 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 0 } /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a button for each page', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 5 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 5 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 5 } /> );
+		expect( screen.getAllByRole( 'button' ) ).toHaveLength( 5 );
 	} );
 
-	it( 'sets the current page when a button is clicked', () => {
+	it( 'sets the current page when a button is clicked', async () => {
+		const user = userEvent.setup( { delay: null } );
 		const setCurrentPage = jest.fn();
-		const wrapper = shallow(
+		render(
 			<PageControl
 				currentPage={ 0 }
 				numberOfPages={ 2 }
 				setCurrentPage={ setCurrentPage }
 			/>
 		);
-		wrapper.find( Button ).at( 1 ).simulate( 'click' );
+
+		await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
 		expect( setCurrentPage ).toHaveBeenCalledWith( 1 );
 	} );
 } );

From e926868f80dc216e5ebb2aa30770460b57150efc Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 11 Aug 2022 16:29:05 +0300
Subject: [PATCH 2/2] Use jest's `advanceTimers` when setting up `userEvent`

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 packages/components/src/guide/test/page-control.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/guide/test/page-control.js b/packages/components/src/guide/test/page-control.js
index 2f9468e058772..caeb3dd005476 100644
--- a/packages/components/src/guide/test/page-control.js
+++ b/packages/components/src/guide/test/page-control.js
@@ -21,7 +21,9 @@ describe( 'PageControl', () => {
 	} );
 
 	it( 'sets the current page when a button is clicked', async () => {
-		const user = userEvent.setup( { delay: null } );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const setCurrentPage = jest.fn();
 		render(
 			<PageControl