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' };