@wordpress/compose 5.16.1-next.4d3b314fd5.0 → 5.18.0

package/src/hooks/use-instance-id/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -14,23 +14,16 @@ describe( 'useInstanceId', () => {
 	};
 
 	it( 'should manage ids', async () => {
-		let test0;
+		const { container, rerender } = render( <TestComponent /> );
 
-		await act( async () => {
-			test0 = create( <TestComponent /> );
-		} );
+		expect( container ).toHaveTextContent( '0' );
 
-		expect( test0.toJSON() ).toBe( '0' );
+		rerender(
+			<div>
+				<TestComponent />
+			</div>
+		);
 
-		let test1;
-
-		await act( async () => {
-			test1 = create( <TestComponent /> );
-		} );
-
-		expect( test1.toJSON() ).toBe( '1' );
-
-		test0.unmount();
-		test1.unmount();
+		expect( container ).toHaveTextContent( '1' );
 	} );
 } );

package/src/hooks/use-keyboard-shortcut/index.js

@@ -3,7 +3,6 @@
  */
 import Mousetrap from 'mousetrap';
 import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
-import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -60,7 +59,10 @@ function useKeyboardShortcut(
 				  // necessary to maintain the existing behavior.
 				  /** @type {Element} */ ( /** @type {unknown} */ ( document ) )
 		);
-		castArray( shortcuts ).forEach( ( shortcut ) => {
+		const shortcutsArray = Array.isArray( shortcuts )
+			? shortcuts
+			: [ shortcuts ];
+		shortcutsArray.forEach( ( shortcut ) => {
 			const keys = shortcut.split( '+' );
 			// Determines whether a key is a modifier by the length of the string.
 			// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that

package/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,18 +33,6 @@ 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,
@@ -52,17 +40,14 @@ describe( 'useMediaQuery', () => {
 			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();

package/src/hooks/use-merge-refs/index.js

@@ -71,6 +71,7 @@ function assignRef( ref, value ) {
  */
 export default function useMergeRefs( refs ) {
 	const element = useRef();
+	const isAttached = useRef( false );
 	const didElementChange = useRef( false );
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {import('react').MutableRefObject<TRef[]>} */
@@ -86,7 +87,10 @@ export default function useMergeRefs( refs ) {
 	// ref with the node, except when the element changes in the same cycle, in
 	// which case the ref callbacks will already have been called.
 	useLayoutEffect( () => {
-		if ( didElementChange.current === false ) {
+		if (
+			didElementChange.current === false &&
+			isAttached.current === true
+		) {
 			refs.forEach( ( ref, index ) => {
 				const previousRef = previousRefs.current[ index ];
 				if ( ref !== previousRef ) {
@@ -113,6 +117,7 @@ export default function useMergeRefs( refs ) {
 		assignRef( element, value );
 
 		didElementChange.current = true;
+		isAttached.current = value !== null;
 
 		// When an element changes, the current ref callback should be called
 		// with the new element and the previous one with `null`.

package/src/hooks/use-merge-refs/test/index.js

@@ -41,6 +41,7 @@ describe( 'useMergeRefs', () => {
 		tagName: TagName = 'div',
 		disable1,
 		disable2,
+		unused,
 	} ) {
 		function refCallback1( value ) {
 			refCallback1.history.push( value );
@@ -63,6 +64,10 @@ describe( 'useMergeRefs', () => {
 			! disable2 && ref2,
 		] );
 
+		if ( unused ) {
+			return <TagName ref={ ref1 } />;
+		}
+
 		return <TagName ref={ mergedRefs } />;
 	}
 
@@ -327,4 +332,43 @@ describe( 'useMergeRefs', () => {
 			[ [], [ originalElement, null ] ],
 		] );
 	} );
+
+	it( 'should allow the hook being unused', () => {
+		const rootElement = document.getElementById( 'root' );
+
+		ReactDOM.render( <MergedRefs unused />, rootElement );
+
+		const originalElement = rootElement.firstElementChild;
+
+		// Render 1: ref 1 should updated, ref 2 should not.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [] ],
+		] );
+
+		ReactDOM.render( <MergedRefs />, rootElement );
+
+		// Render 2: ref 2 should be updated as well.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement, null, originalElement ], [ originalElement ] ],
+			[ [], [] ],
+		] );
+
+		ReactDOM.render( <MergedRefs unused />, rootElement );
+
+		// Render 3: ref 2 should be updated with null
+		expect( renderCallback.history ).toEqual( [
+			[
+				[
+					originalElement,
+					null,
+					originalElement,
+					null,
+					originalElement,
+				],
+				[ originalElement, null ],
+			],
+			[ [], [] ],
+			[ [], [] ],
+		] );
+	} );
 } );

package/src/hooks/use-resize-observer/index.native.js

@@ -47,7 +47,11 @@ const useResizeObserver = () => {
 	}, [] );
 
 	const observer = (
-		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />
+		<View
+			testID="resize-observer"
+			style={ StyleSheet.absoluteFill }
+			onLayout={ onLayout }
+		/>
 	);
 
 	return [ observer, measurements ];

package/src/hooks/use-resize-observer/test/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render, fireEvent } from 'test/helpers';
 import { View } from 'react-native';
 
 /**
@@ -13,36 +13,32 @@ const TestComponent = ( { onLayout } ) => {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	return (
-		<View sizes={ sizes } onLayout={ onLayout }>
+		<View testID="test-component" sizes={ sizes } onLayout={ onLayout }>
 			{ resizeObserver }
 		</View>
 	);
 };
 
-const renderWithOnLayout = ( component ) => {
-	const testComponent = create( component );
-
-	const mockNativeEvent = {
-		nativeEvent: {
-			layout: {
-				width: 300,
-				height: 500,
+describe( 'useResizeObserver()', () => {
+	it( 'should return "{ width: 300, height: 500 }"', () => {
+		const mockNativeEvent = {
+			nativeEvent: {
+				layout: {
+					width: 300,
+					height: 500,
+				},
 			},
-		},
-	};
-
-	act( () => {
-		testComponent.toJSON().children[ 0 ].props.onLayout( mockNativeEvent );
-	} );
+		};
 
-	return testComponent.toJSON();
-};
+		const { getByTestId } = render(
+			<TestComponent onLayout={ mockNativeEvent } />
+		);
 
-describe( 'useResizeObserver()', () => {
-	it( 'should return "{ width: 300, height: 500 }"', () => {
-		const component = renderWithOnLayout( <TestComponent /> );
+		const resizeObserver = getByTestId( 'resize-observer' );
+		fireEvent( resizeObserver, 'layout', mockNativeEvent );
 
-		expect( component.props.sizes ).toMatchObject( {
+		const testComponent = getByTestId( 'test-component' );
+		expect( testComponent.props.sizes ).toMatchObject( {
 			width: 300,
 			height: 500,
 		} );

package/src/hooks/use-viewport-match/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -25,105 +25,105 @@ describe( 'useViewportMatch', () => {
 	};
 
 	it( 'should return true when the viewport matches', async () => {
-		let root;
 		useMediaQueryMock.mockReturnValue( true );
 
-		await act( async () => {
-			root = create( <TestComponent breakpoint="wide" operator="<" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
+		const { container, rerender } = render(
+			<TestComponent breakpoint="wide" operator="<" />
+		);
 
-		await act( async () => {
-			root.update( <TestComponent breakpoint="medium" operator=">=" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
+		expect( container ).toHaveTextContent( 'useViewportMatch: true' );
 
-		await act( async () => {
-			root.update( <TestComponent breakpoint="small" operator=">=" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
+		rerender( <TestComponent breakpoint="medium" operator=">=" /> );
 
-		expect( useMediaQueryMock.mock.calls ).toEqual( [
-			[ '(max-width: 1280px)' ],
-			[ '(min-width: 782px)' ],
-			[ '(min-width: 600px)' ],
-		] );
+		expect( container ).toHaveTextContent( 'useViewportMatch: true' );
 
-		root.unmount();
+		rerender( <TestComponent breakpoint="small" operator=">=" /> );
+
+		expect( container ).toHaveTextContent( 'useViewportMatch: true' );
+
+		expect( useMediaQueryMock ).toHaveBeenCalledTimes( 3 );
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			1,
+			'(max-width: 1280px)'
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			2,
+			'(min-width: 782px)'
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			3,
+			'(min-width: 600px)'
+		);
 	} );
 
 	it( 'should return false when the viewport matches', async () => {
-		let root;
 		useMediaQueryMock.mockReturnValue( false );
 
-		await act( async () => {
-			root = create( <TestComponent breakpoint="huge" operator=">=" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
+		const { container, rerender } = render(
+			<TestComponent breakpoint="huge" operator=">=" />
+		);
+
+		expect( container ).toHaveTextContent( 'useViewportMatch: false' );
 
-		await act( async () => {
-			root.update( <TestComponent breakpoint="large" operator="<" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
+		rerender( <TestComponent breakpoint="large" operator="<" /> );
 
-		await act( async () => {
-			root.update( <TestComponent breakpoint="mobile" operator="<" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
+		expect( container ).toHaveTextContent( 'useViewportMatch: false' );
 
-		expect( useMediaQueryMock.mock.calls ).toEqual( [
-			[ '(min-width: 1440px)' ],
-			[ '(max-width: 960px)' ],
-			[ '(max-width: 480px)' ],
-		] );
+		rerender( <TestComponent breakpoint="mobile" operator="<" /> );
 
-		root.unmount();
+		expect( container ).toHaveTextContent( 'useViewportMatch: false' );
+
+		expect( useMediaQueryMock ).toHaveBeenCalledTimes( 3 );
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			1,
+			'(min-width: 1440px)'
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			2,
+			'(max-width: 960px)'
+		);
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith(
+			3,
+			'(max-width: 480px)'
+		);
 	} );
 
 	it( 'should correctly simulate a value', async () => {
-		let root;
 		useMediaQueryMock.mockReturnValue( true );
 
 		const innerElement = <TestComponent breakpoint="wide" operator=">=" />;
 		const WidthProvider = useViewportMatch.__experimentalWidthProvider;
 
-		await act( async () => {
-			root = create(
-				<WidthProvider value={ 300 }>{ innerElement }</WidthProvider>
-			);
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
-
-		await act( async () => {
-			root.update(
-				<WidthProvider value={ 1200 }>{ innerElement }</WidthProvider>
-			);
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
-
-		await act( async () => {
-			root.update(
-				<WidthProvider value={ 1300 }>{ innerElement }</WidthProvider>
-			);
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
-
-		await act( async () => {
-			root.update(
-				<WidthProvider value={ 1300 }>
-					<TestComponent breakpoint="wide" operator="<" />
-				</WidthProvider>
-			);
-		} );
-		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
-
-		expect( useMediaQueryMock.mock.calls ).toEqual( [
-			[ undefined ],
-			[ undefined ],
-			[ undefined ],
-			[ undefined ],
-		] );
-
-		root.unmount();
+		const { container, rerender } = render(
+			<WidthProvider value={ 300 }>{ innerElement }</WidthProvider>
+		);
+		expect( container ).toHaveTextContent( 'useViewportMatch: false' );
+
+		rerender(
+			<WidthProvider value={ 1200 }>{ innerElement }</WidthProvider>
+		);
+
+		expect( container ).toHaveTextContent( 'useViewportMatch: false' );
+
+		rerender(
+			<WidthProvider value={ 1300 }>{ innerElement }</WidthProvider>
+		);
+
+		expect( container ).toHaveTextContent( 'useViewportMatch: true' );
+
+		rerender(
+			<WidthProvider value={ 1300 }>
+				<TestComponent breakpoint="wide" operator="<" />
+			</WidthProvider>
+		);
+
+		expect( container ).toHaveTextContent( 'useViewportMatch: false' );
+
+		expect( useMediaQueryMock ).toHaveBeenCalledTimes( 4 );
+		// `useMediaQuery` is expected to receive `undefined` when simulating width.
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 1, undefined );
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 2, undefined );
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 3, undefined );
+		expect( useMediaQueryMock ).toHaveBeenNthCalledWith( 4, undefined );
 	} );
 } );