From 64cbb32c207dd7e655113e9ba6d97dc58327cc7d Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 7 Oct 2022 10:14:29 +0400
Subject: [PATCH] Viewport: Refactor ifViewportMatches to use RTL

---
 .../viewport/src/test/if-viewport-matches.js  | 43 +++++++------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/packages/viewport/src/test/if-viewport-matches.js b/packages/viewport/src/test/if-viewport-matches.js
index 8f0d4eb3cb27c..fcf1d168067dd 100644
--- a/packages/viewport/src/test/if-viewport-matches.js
+++ b/packages/viewport/src/test/if-viewport-matches.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import TestRenderer, { act } from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import { useViewportMatch as useViewportMatchMock } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -14,45 +14,32 @@ import { useViewportMatch as useViewportMatchMock } from '@wordpress/compose';
 import '../store';
 import ifViewportMatches from '../if-viewport-matches';
 
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+
 describe( 'ifViewportMatches()', () => {
 	const Component = () => <div>Hello</div>;
 
 	afterEach( () => {
-		useViewportMatchMock.mockClear();
+		useViewportMatch.mockClear();
 	} );
 
 	it( 'should not render if query does not match', () => {
-		useViewportMatchMock.mockReturnValueOnce( false );
+		useViewportMatch.mockReturnValueOnce( false );
 		const EnhancedComponent = ifViewportMatches( '< wide' )( Component );
+		render( <EnhancedComponent /> );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create( <EnhancedComponent /> );
-		} );
-
-		expect( useViewportMatchMock.mock.calls ).toEqual( [
-			[ 'wide', '<' ],
-		] );
+		expect( useViewportMatch ).toHaveBeenCalledWith( 'wide', '<' );
 
-		expect( testRenderer.root.findAllByType( Component ) ).toHaveLength(
-			0
-		);
+		expect( screen.queryByText( 'Hello' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if query does match', () => {
-		useViewportMatchMock.mockReturnValueOnce( true );
+		useViewportMatch.mockReturnValueOnce( true );
 		const EnhancedComponent = ifViewportMatches( '>= wide' )( Component );
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create( <EnhancedComponent /> );
-		} );
-
-		expect( useViewportMatchMock.mock.calls ).toEqual( [
-			[ 'wide', '>=' ],
-		] );
-
-		expect( testRenderer.root.findAllByType( Component ) ).toHaveLength(
-			1
-		);
+		render( <EnhancedComponent /> );
+
+		expect( useViewportMatch ).toHaveBeenCalledWith( 'wide', '>=' );
+
+		expect( screen.queryByText( 'Hello' ) ).toBeInTheDocument();
 	} );
 } );