diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1ff727b29145db..203d2c2a2526bc 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)
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 9b32ae72dd7905..2f5dea414c34bb 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,8 @@
/**
* External dependencies
*/
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* WordPress dependencies
@@ -16,9 +16,14 @@ import withFocusReturn from '../';
class Test extends Component {
render() {
+ const { className, focusHistory } = this.props;
return (
-
-
+
+
);
}
@@ -41,32 +46,25 @@ describe( 'withFocusReturn()', () => {
} );
it( 'should render a basic Test component inside the HOC', () => {
- const renderedComposite = renderer.create(
);
- 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(
);
+
+ expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
} );
it( 'should pass own props through to the wrapped element', () => {
- const renderedComposite = renderer.create(
-
+ render(
);
+
+ 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(
-
+ render(
);
+
+ 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', () => {
@@ -85,17 +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(
, {
container: document.body.appendChild(
document.createElement( 'div' )
),
} );
- const textarea = container.querySelector( 'textarea' );
- fireEvent.focusIn( textarea, { target: textarea } );
- textarea.focus();
- expect( textarea ).toHaveFocus();
+ // Click inside the textarea to focus it.
+ await user.click(
+ screen.getByRole( 'textbox', {
+ name: 'Textarea',
+ } )
+ );
// Should return to the activeElement saved with this component.
unmount();