@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

package/src/components/provider/test/use-block-sync.js

@@ -6,7 +6,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -48,16 +48,13 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					value={ fakeBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				value={ fakeBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called on mount.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -68,15 +65,13 @@ describe( 'useBlockSync hook', () => {
 		const testBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					value={ testBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				value={ testBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called when the incoming value changes.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -95,17 +90,14 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					clientId="test"
-					value={ fakeBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				clientId="test"
+				value={ fakeBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		expect( resetBlocks ).not.toHaveBeenCalled();
 		expect( onChange ).not.toHaveBeenCalled();
@@ -123,16 +115,14 @@ describe( 'useBlockSync hook', () => {
 				attributes: { foo: 1 },
 			},
 		];
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					clientId="test"
-					value={ testBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ testBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called when the incoming value changes.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -158,22 +148,20 @@ describe( 'useBlockSync hook', () => {
 				attributes: { foo: 1 },
 			},
 		];
-		let root;
+
 		let registry;
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					clientId="test"
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				clientId="test"
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		registry
 			.dispatch( blockEditorStore )
@@ -188,16 +176,14 @@ describe( 'useBlockSync hook', () => {
 		// triggered once more.
 		expect( newBlockValue ).not.toBe( value1 );
 
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					clientId="test"
-					value={ newBlockValue }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ newBlockValue }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// replaceInnerBlocks should not be called when the controlling
 		// block value is the same as what already exists in the store.
@@ -210,16 +196,14 @@ describe( 'useBlockSync hook', () => {
 			'setHasControlledInnerBlocks'
 		);
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ [] }
-					onChange={ jest.fn() }
-					onInput={ jest.fn() }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				clientId="test"
+				value={ [] }
+				onChange={ jest.fn() }
+				onInput={ jest.fn() }
+			/>
+		);
 		expect( setAsController ).toHaveBeenCalledWith( 'test', true );
 	} );
 
@@ -233,16 +217,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 
@@ -278,16 +260,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 
@@ -327,30 +307,26 @@ describe( 'useBlockSync hook', () => {
 			},
 		];
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				clientId="test"
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 		replaceInnerBlocks.mockClear();
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ [] }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ [] }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
 		expect( onChange ).not.toHaveBeenCalled();
@@ -379,16 +355,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 		replaceInnerBlocks.mockClear();
@@ -429,17 +403,15 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ fakeBlocks }
-					onChange={ onChange1 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ fakeBlocks }
+				onChange={ onChange1 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry
@@ -468,16 +440,14 @@ describe( 'useBlockSync hook', () => {
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ newBlocks }
-					onChange={ onChange2 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ newBlocks }
+				onChange={ onChange2 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry
@@ -511,17 +481,15 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ fakeBlocks }
-					onChange={ onChange1 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ fakeBlocks }
+				onChange={ onChange1 }
+				onInput={ onInput }
+			/>
+		);
 
 		const newBlocks = [
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
@@ -531,16 +499,14 @@ describe( 'useBlockSync hook', () => {
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ newBlocks }
-					onChange={ onChange2 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ newBlocks }
+				onChange={ onChange2 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry