Compose: Refactor useMediaQuery tests to RTL (#44912)

* Compose: Refactor useMediaQuery tests to RTL

* Remove duplicate test

Author: Mamaduka

packages/compose/src/hooks/use-media-query/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render, act } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -33,36 +33,21 @@ describe( 'useMediaQuery', () => {
 		return `useMediaQuery: ${ queryResult }`;
 	};
 
-	it( 'should return true when query matches on the first render', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-
-		const root = create( <TestComponent query="(min-width: 782px)" /> );
-
-		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
-	} );
-
 	it( 'should return true when query matches', async () => {
 		global.matchMedia.mockReturnValue( {
 			addListener,
 			removeListener,
 			matches: true,
 		} );
 
-		let root;
+		const { container, unmount } = render(
+			<TestComponent query="(min-width: 782px)" />
+		);
 
-		await act( async () => {
-			root = create( <TestComponent query="(min-width: 782px)" /> );
-		} );
+		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
-		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+		unmount();
 
-		await act( async () => {
-			root.unmount();
-		} );
 		expect( removeListener ).toHaveBeenCalled();
 	} );
 
@@ -90,24 +75,23 @@ describe( 'useMediaQuery', () => {
 			matches: false,
 		} );
 
-		let root, updateMatchFunction;
-		await act( async () => {
-			root = create( <TestComponent query="(min-width: 782px)" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+		const { container, unmount } = render(
+			<TestComponent query="(min-width: 782px)" />
+		);
+
+		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
+		let updateMatchFunction;
 		await act( async () => {
 			updateMatchFunction = addListener.mock.calls[ 0 ][ 0 ];
 			updateMatchFunction();
 		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
 
-		await act( async () => {
-			root.unmount();
-		} );
-		expect( removeListener.mock.calls ).toEqual( [
-			[ updateMatchFunction ],
-		] );
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+
+		unmount();
+
+		expect( removeListener ).toHaveBeenCalledWith( updateMatchFunction );
 	} );
 
 	it( 'should return false when the query does not matches', async () => {
@@ -116,15 +100,15 @@ describe( 'useMediaQuery', () => {
 			removeListener,
 			matches: false,
 		} );
-		let root;
-		await act( async () => {
-			root = create( <TestComponent query="(min-width: 782px)" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
 
-		await act( async () => {
-			root.unmount();
-		} );
+		const { container, unmount } = render(
+			<TestComponent query="(min-width: 782px)" />
+		);
+
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+
+		unmount();
+
 		expect( removeListener ).toHaveBeenCalled();
 	} );
 
@@ -134,21 +118,17 @@ describe( 'useMediaQuery', () => {
 			removeListener,
 			matches: false,
 		} );
-		let root;
-		await act( async () => {
-			root = create( <TestComponent /> );
-		} );
+
+		const { container, rerender, unmount } = render( <TestComponent /> );
+
 		// Query will be case to a boolean to simplify the return type.
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
 
-		await act( async () => {
-			root.update( <TestComponent query={ false } /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
+		rerender( <TestComponent query={ false } /> );
 
-		await act( async () => {
-			root.unmount();
-		} );
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+
+		unmount();
 		expect( global.matchMedia ).not.toHaveBeenCalled();
 		expect( addListener ).not.toHaveBeenCalled();
 		expect( removeListener ).not.toHaveBeenCalled();