Add Inserter testID

packages/block-editor/src/components/inserter/index.native.js

@@ -19,7 +19,12 @@ const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
 		title={ __( 'Add block' ) }
 		icon={ ( <Dashicon icon="plus-alt" style={ style } color={ style.color } /> ) }
 		onClick={ onToggle }
-		extraProps={ { hint: __( 'Double tap to add a block' ) } }
+		extraProps={ {
+			hint: __( 'Double tap to add a block' ),
+			// testID is present to disambiguate this element for native UI tests. It's not
+			// usually required for components. See: https://git.io/JeQ7G.
+			testID: 'add-block-button',
+		} }
 		isDisabled={ disabled }
 	/>
 );

packages/block-editor/src/components/inserter/test/index.native.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import renderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../index';
+import '../../..'; // Ensure store dependencies are imported via root.
+
+describe( 'Inserter', () => {
+	it( 'button contains the testID "add-block-button"', () => {
+		const component = renderer.create( <Inserter /> );
+		const rendered = component.toJSON();
+		expect( rendered.children[ 0 ].props.testID ).toEqual( 'add-block-button' );
+	} );
+} );

packages/components/src/button/index.native.js

@@ -71,6 +71,7 @@ export function Button( props ) {
 		'aria-disabled': ariaDisabled,
 		'aria-label': ariaLabel,
 		'data-subscript': subscript,
+		testID,
 	} = props;
 
 	const isDisabled = ariaDisabled || disabled;
@@ -107,6 +108,7 @@ export function Button( props ) {
 			onPress={ onClick }
 			style={ styles.container }
 			disabled={ isDisabled }
+			testID={ testID }
 		>
 			<View style={ buttonViewStyle }>
 				<View style={ { flexDirection: 'row' } }>