diff --git a/packages/compose/src/higher-order/with-global-events/test/index.js b/packages/compose/src/higher-order/with-global-events/test/index.js
index b68c3443f0bab3..2a7cce35ea7345 100644
--- a/packages/compose/src/higher-order/with-global-events/test/index.js
+++ b/packages/compose/src/higher-order/with-global-events/test/index.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
/**
* WordPress dependencies
@@ -30,8 +30,6 @@ jest.mock( '../listener', () => {
} );
describe( 'withGlobalEvents', () => {
- let wrapper;
-
class OriginalComponent extends Component {
handleResize( event ) {
this.props.onResize( event );
@@ -50,51 +48,42 @@ describe( 'withGlobalEvents', () => {
jest.clearAllMocks();
} );
- afterEach( () => {
- if ( wrapper ) {
- wrapper.unmount();
- wrapper = null;
- }
- } );
-
- function mountEnhancedComponent( props = {} ) {
+ it( 'renders with original component', () => {
const EnhancedComponent = withGlobalEvents( {
resize: 'handleResize',
} )( OriginalComponent );
- props.ref = () => {};
-
- wrapper = TestRenderer.create(
- Hello
- );
- }
-
- it( 'renders with original component', () => {
- mountEnhancedComponent();
+ render( {} }>Hello );
expect( console ).toHaveWarned();
- expect( wrapper.root.findByType( 'div' ).children[ 0 ] ).toBe(
- 'Hello'
- );
+ expect( screen.getByText( 'Hello' ) ).toBeVisible();
} );
it( 'binds events from passed object', () => {
- mountEnhancedComponent();
+ const EnhancedComponent = withGlobalEvents( {
+ resize: 'handleResize',
+ } )( OriginalComponent );
- // Get the HOC wrapper instance.
- const hocInstance =
- wrapper.root.findByType( OriginalComponent ).parent.instance;
+ render( {} }>Hello );
expect( Listener._instance.add ).toHaveBeenCalledWith(
'resize',
- hocInstance
+ // If not `undefined`, then we consider handlers were properly bound to the wrapper component.
+ expect.any( Object )
);
} );
it( 'handles events', () => {
+ const EnhancedComponent = withGlobalEvents( {
+ resize: 'handleResize',
+ } )( OriginalComponent );
const onResize = jest.fn();
- mountEnhancedComponent( { onResize } );
+ render(
+ {} } onResize={ onResize }>
+ Hello
+
+ );
const event = { type: 'resize' };