From c910da313b3facb550013542f81720a0e33c93a4 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Mon, 17 Oct 2022 12:40:59 +0300
Subject: [PATCH 1/4] Components: Refactor withFocusReturn tests to RTL

---
 .../with-focus-return/test/index.js           | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
index 9b32ae72dd790..7aa266dfa53dc 100644
--- a/packages/components/src/higher-order/with-focus-return/test/index.js
+++ b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -16,8 +15,13 @@ import withFocusReturn from '../';
 
 class Test extends Component {
 	render() {
+		const { className, focusHistory } = this.props;
 		return (
-			<div className="test">
+			<div
+				className={ className }
+				data-testid="test-element"
+				data-focus-history={ focusHistory }
+			>
 				<textarea />
 			</div>
 		);
@@ -41,32 +45,25 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should render a basic Test component inside the HOC', () => {
-			const renderedComposite = renderer.create( <Composite /> );
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			const wrappedElementShallow = wrappedElement.children[ 0 ];
-			expect( wrappedElementShallow.props.className ).toBe( 'test' );
-			expect( wrappedElementShallow.type ).toBe( 'div' );
-			expect( wrappedElementShallow.children[ 0 ].type ).toBe(
-				'textarea'
-			);
+			render( <Composite /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
 		} );
 
 		it( 'should pass own props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toHaveClass(
+				'test'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.test ).toBe( 'test' );
 		} );
 
 		it( 'should not pass any withFocusReturn context props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).not.toHaveAttribute(
+				'data-focus-history'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.focusHistory ).toBeUndefined();
 		} );
 
 		it( 'should not switch focus back to the bound focus element', () => {

From 04d0e834cab6ff65d513dc7eba1bc9fe9180a5fe Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Mon, 17 Oct 2022 12:43:57 +0300
Subject: [PATCH 2/4] Add a CHANGELOG entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1ff727b29145d..203d2c2a2526b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 -   `Sandbox`: Use `toString` to create observe and resize script string ([#42872](https://github.com/WordPress/gutenberg/pull/42872)).
 -   `Navigator`: refactor unit tests to TypeScript and to `user-event` ([#44970](https://github.com/WordPress/gutenberg/pull/44970)).
 -   `Navigator`: Refactor Storybook code to TypeScript and controls ([#44979](https://github.com/WordPress/gutenberg/pull/44979)).
+-   `withFocusReturn`: Refactor tests to `@testing-library/react` ([#45012](https://github.com/WordPress/gutenberg/pull/45012)).
 
 ## 21.2.0 (2022-10-05)
 

From d9daf501d15e8f8aa929f55f3961425d2394bf4a Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Mon, 17 Oct 2022 16:30:49 +0300
Subject: [PATCH 3/4] Remove unnecessary fireEvent

---
 .../higher-order/with-focus-return/test/index.js    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
index 7aa266dfa53dc..d799d87f76c29 100644
--- a/packages/components/src/higher-order/with-focus-return/test/index.js
+++ b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,7 @@ class Test extends Component {
 				data-testid="test-element"
 				data-focus-history={ focusHistory }
 			>
-				<textarea />
+				<textarea aria-label="Textarea" />
 			</div>
 		);
 	}
@@ -89,10 +89,11 @@ describe( 'withFocusReturn()', () => {
 				),
 			} );
 
-			const textarea = container.querySelector( 'textarea' );
-			fireEvent.focusIn( textarea, { target: textarea } );
-			textarea.focus();
-			expect( textarea ).toHaveFocus();
+			screen
+				.getByRole( 'textbox', {
+					name: 'Textarea',
+				} )
+				.focus();
 
 			// Should return to the activeElement saved with this component.
 			unmount();

From 24b2f4e72fb2648c2c34185c512ebeb63aae5f73 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Mon, 17 Oct 2022 16:43:59 +0300
Subject: [PATCH 4/4] Click into the textarea to focus it

---
 .../higher-order/with-focus-return/test/index.js   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
index d799d87f76c29..2f5dea414c34b 100644
--- a/packages/components/src/higher-order/with-focus-return/test/index.js
+++ b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -82,18 +83,23 @@ describe( 'withFocusReturn()', () => {
 			expect( switchFocusTo ).toHaveFocus();
 		} );
 
-		it( 'should switch focus back when unmounted while having focus', () => {
+		it( 'should switch focus back when unmounted while having focus', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const { container, unmount } = render( <Composite />, {
 				container: document.body.appendChild(
 					document.createElement( 'div' )
 				),
 			} );
 
-			screen
-				.getByRole( 'textbox', {
+			// Click inside the textarea to focus it.
+			await user.click(
+				screen.getByRole( 'textbox', {
 					name: 'Textarea',
 				} )
-				.focus();
+			);
 
 			// Should return to the activeElement saved with this component.
 			unmount();