test: Fix failures due to image component modifications (#58213)

The mobile image component introduce new asynchronous effects. We must
await the result of those effect, in the form of asserting UI changes
from the subsequent state updates, to satisfy the React test utilities
expectation that unexpected re-renders do not occur after the test
completes.

Additionally, there were instances of awaiting `act` invocations that
were not asynchronous. The erroneous usage of `await` for these
synchronous `act` calls resulted in cryptic errors. In reality, the
logic run within these `act` calls are synchronous and should merely be
wrapped in `act` to signal that they result in a re-render.

Author: dcalhoun

packages/components/src/mobile/image/index.native.js

@@ -305,6 +305,7 @@ const ImageComponent = ( {
 											resizeMethod: 'scale',
 										} ) }
 										resizeMode={ imageResizeMode }
+										testID={ `network-image-${ url }` }
 									/>
 								) }
 								{ ! networkImageLoaded && ! networkURL && (
@@ -334,6 +335,11 @@ const ImageComponent = ( {
 										resizeMethod: 'scale',
 									} ) }
 									resizeMode={ imageResizeMode }
+									testID={ `network-image-${
+										networkURL && networkImageLoaded
+											? networkURL
+											: localURL || url
+									}` }
 								/>
 								<Image
 									source={ { uri: networkURL } }

packages/edit-post/src/test/editor.native.js

@@ -103,8 +103,10 @@ describe( 'Editor', () => {
 		await initializeEditor();
 
 		// Act
-		await act( () => mediaAppendCallback( MEDIA[ 0 ] ) );
-		await act( () => mediaAppendCallback( MEDIA[ 2 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 0 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 2 ] ) );
+		await screen.findByTestId( `network-image-${ MEDIA[ 0 ].serverUrl }` );
+		await screen.findByTestId( `network-image-${ MEDIA[ 2 ].serverUrl }` );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -122,10 +124,11 @@ describe( 'Editor', () => {
 		await initializeEditor();
 
 		// Act
-		await act( () => mediaAppendCallback( MEDIA[ 0 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 0 ] ) );
 		// Unsupported type (PDF file)
-		await act( () => mediaAppendCallback( MEDIA[ 1 ] ) );
-		await act( () => mediaAppendCallback( MEDIA[ 3 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 1 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 3 ] ) );
+		await screen.findByTestId( `network-image-${ MEDIA[ 0 ].serverUrl }` );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();

test/native/setup.js

@@ -284,6 +284,14 @@ jest.spyOn( Image, 'getSize' ).mockImplementation( ( url, success ) =>
 	success( 0, 0 )
 );
 
+jest.spyOn( Image, 'prefetch' ).mockImplementation(
+	( url, callback = () => {} ) => {
+		const mockRequestId = `mockRequestId-${ url }`;
+		callback( mockRequestId );
+		return Promise.resolve( true );
+	}
+);
+
 jest.mock( 'react-native/Libraries/Utilities/BackHandler', () => {
 	return jest.requireActual(
 		'react-native/Libraries/Utilities/__mocks__/BackHandler.js'