diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.tsx
similarity index 75%
rename from packages/components/src/focal-point-picker/test/index.js
rename to packages/components/src/focal-point-picker/test/index.tsx
index d5c7946cffd86..1eccced32c70a 100644
--- a/packages/components/src/focal-point-picker/test/index.js
+++ b/packages/components/src/focal-point-picker/test/index.tsx
@@ -8,6 +8,19 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import Picker from '..';
+import type { FocalPointPickerProps } from '../types';
+
+type Log = { name: string; args: unknown[] };
+type EventLogger = ( name: string, args: unknown[] ) => void;
+
+const props: FocalPointPickerProps = {
+	onChange: jest.fn(),
+	url: 'test-url',
+	value: {
+		x: 0,
+		y: 0,
+	},
+};
 
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
@@ -16,7 +29,7 @@ describe( 'FocalPointPicker', () => {
 
 			const mockOnChange = jest.fn();
 
-			render( <Picker onChange={ mockOnChange } /> );
+			render( <Picker { ...props } onChange={ mockOnChange } /> );
 
 			const draggableArea = screen.getByRole( 'button' );
 
@@ -32,6 +45,7 @@ describe( 'FocalPointPicker', () => {
 
 			render(
 				<Picker
+					{ ...props }
 					onChange={ mockOnChange }
 					onDrag={ mockOnDrag }
 					onDragEnd={ mockOnDragEnd }
@@ -57,15 +71,16 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'drag gestures', () => {
 		it( 'should call onDragStart, onDrag, onDragEnd and onChange in that order', () => {
-			const logs = [];
-			const eventLogger = ( name, args ) => logs.push( { name, args } );
+			const logs: Log[] = [];
+			const eventLogger: EventLogger = ( name, args ) =>
+				logs.push( { name, args } );
 			const events = [ 'onDragStart', 'onDrag', 'onDragEnd', 'onChange' ];
-			const handlers = {};
+			const handlers: { [ key: string ]: EventLogger } = {};
 			events.forEach( ( name ) => {
 				handlers[ name ] = ( ...all ) => eventLogger( name, all );
 			} );
 
-			render( <Picker { ...handlers } /> );
+			render( <Picker { ...props } { ...handlers } /> );
 
 			const dragArea = screen.getByRole( 'button' );
 
@@ -92,6 +107,7 @@ describe( 'FocalPointPicker', () => {
 
 			render(
 				<Picker
+					{ ...props }
 					value={ { x: 0.25, y: 0.25 } }
 					onChange={ spyChange }
 					resolvePoint={ () => {
@@ -118,12 +134,12 @@ describe( 'FocalPointPicker', () => {
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
 			const { rerender } = render(
-				<Picker value={ { x: 0.25, y: 0.5 } } />
+				<Picker { ...props } value={ { x: 0.25, y: 0.5 } } />
 			);
 			const xInput = screen.getByRole( 'spinbutton', {
 				name: 'Focal point left position',
-			} );
-			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
+			} ) as HTMLButtonElement;
+			rerender( <Picker { ...props } value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
@@ -131,7 +147,11 @@ describe( 'FocalPointPicker', () => {
 
 			const spyChange = jest.fn();
 			render(
-				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
+				<Picker
+					{ ...props }
+					value={ { x: 0.14, y: 0.62 } }
+					onChange={ spyChange }
+				/>
 			);
 			// Focus and press arrow up
 			const dragArea = screen.getByRole( 'button' );
@@ -151,20 +171,27 @@ describe( 'FocalPointPicker', () => {
 			const onChangeSpy = jest.fn();
 			render(
 				<Picker
-					value={ { x: '0.1', y: '0.2' } }
+					{ ...props }
+					value={ {
+						x: '0.1' as unknown as number,
+						y: '0.2' as unknown as number,
+					} }
 					onChange={ onChangeSpy }
 				/>
 			);
-
 			expect(
-				screen.getByRole( 'spinbutton', {
-					name: 'Focal point left position',
-				} ).value
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point left position',
+					} ) as HTMLButtonElement
+				 ).value
 			).toBe( '10' );
 			expect(
-				screen.getByRole( 'spinbutton', {
-					name: 'Focal point top position',
-				} ).value
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point top position',
+					} ) as HTMLButtonElement
+				 ).value
 			).toBe( '20' );
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );
diff --git a/packages/components/src/focal-point-picker/test/media.js b/packages/components/src/focal-point-picker/test/media.tsx
similarity index 63%
rename from packages/components/src/focal-point-picker/test/media.js
rename to packages/components/src/focal-point-picker/test/media.tsx
index 25296424cf65e..e2c03968f795d 100644
--- a/packages/components/src/focal-point-picker/test/media.js
+++ b/packages/components/src/focal-point-picker/test/media.tsx
@@ -7,11 +7,22 @@ import { render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import Media from '../media';
+import type { FocalPointPickerMediaProps } from '../types';
+
+type FocalPointPickerMediaTestProps = FocalPointPickerMediaProps & {
+	'data-testid': string;
+};
+
+const props: FocalPointPickerMediaTestProps = {
+	alt: '',
+	src: '',
+	'data-testid': 'media',
+};
 
 describe( 'FocalPointPicker/Media', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <Media data-testid="media" /> );
+			render( <Media { ...props } /> );
 
 			expect( screen.getByTestId( 'media' ) ).toBeVisible();
 		} );
@@ -19,7 +30,7 @@ describe( 'FocalPointPicker/Media', () => {
 
 	describe( 'Media types', () => {
 		it( 'should render a placeholder by default', () => {
-			render( <Media data-testid="media" /> );
+			render( <Media { ...props } /> );
 
 			expect( screen.getByTestId( 'media' ) ).toHaveClass(
 				'components-focal-point-picker__media--placeholder'
@@ -28,34 +39,28 @@ describe( 'FocalPointPicker/Media', () => {
 
 		it( 'should render an video if src is a video file', () => {
 			const { rerender } = render(
-				<Media src="file.mp4" muted={ false } data-testid="media" />
+				<Media { ...props } src="file.mp4" muted={ false } />
 			);
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender(
-				<Media src="file.ogg" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.ogg" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender(
-				<Media src="file.webm" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.webm" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 		} );
 
 		it( 'should render an image file, if not video', () => {
 			const { rerender } = render(
-				<Media src="file.gif" data-testid="media" />
+				<Media { ...props } src="file.gif" />
 			);
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 
-			rerender(
-				<Media src="file.png" muted={ false } data-testid="media" />
-			);
+			rerender( <Media { ...props } src="file.png" muted={ false } /> );
 
 			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 		} );