Components: Fix no-node-access violations in FocalPointPicker tests (#…

…46312)

packages/components/src/focal-point-picker/test/media.js

@@ -1,58 +1,63 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import Media from '../media';
 
-const getMedia = ( container ) =>
-	container.querySelector( '.components-focal-point-picker__media' );
-
 describe( 'FocalPointPicker/Media', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
+			render( <Media data-testid="media" /> );
 
-			expect( el ).toBeTruthy();
+			expect( screen.getByTestId( 'media' ) ).toBeVisible();
 		} );
 	} );
 
 	describe( 'Media types', () => {
 		it( 'should render a placeholder by default', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
+			render( <Media data-testid="media" /> );
 
-			expect( el.outerHTML ).toContain( 'placeholder' );
+			expect( screen.getByTestId( 'media' ) ).toHaveClass(
+				'components-focal-point-picker__media--placeholder'
+			);
 		} );
 
 		it( 'should render an video if src is a video file', () => {
-			const { container, rerender } = render(
-				<Media src="file.mp4" muted={ false } />
+			const { rerender } = render(
+				<Media src="file.mp4" muted={ false } data-testid="media" />
 			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender( <Media src="file.ogg" muted={ false } /> );
+			rerender(
+				<Media src="file.ogg" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender( <Media src="file.webm" muted={ false } /> );
+			rerender(
+				<Media src="file.webm" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 		} );
 
 		it( 'should render an image file, if not video', () => {
-			const { container, rerender } = render( <Media src="file.gif" /> );
+			const { rerender } = render(
+				<Media src="file.gif" data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 
-			rerender( <Media src="file.png" muted={ false } /> );
+			rerender(
+				<Media src="file.png" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 		} );
 	} );
 } );