fix: prevent non editable textinputs from being updated through getByTestID (#1092)

* fix: prevent non editable textinputs from being updated through getByTestID

* refactor: add comment to explain double check in isTextInput function

* Update src/__tests__/fireEvent.test.tsx

* Update src/__tests__/fireEvent.test.tsx

Co-authored-by: pierrezimmermann <pierrez@nam.tech>
Co-authored-by: Maciej Jastrzebski <mdjastrzebski@gmail.com>

Author: 3 people

src/__tests__/fireEvent.test.tsx

@@ -235,6 +235,24 @@ test('should not fire on non-editable TextInput', () => {
   expect(onChangeTextMock).not.toHaveBeenCalled();
 });
 
+test('should not fire on non-editable host TextInput', () => {
+  const testID = 'my-text-input';
+  const onChangeTextMock = jest.fn();
+  const NEW_TEXT = 'New text';
+
+  const { getByTestId } = render(
+    <TextInput
+      editable={false}
+      testID={testID}
+      onChangeText={onChangeTextMock}
+      placeholder="placeholder"
+    />
+  );
+
+  fireEvent.changeText(getByTestId(testID), NEW_TEXT);
+  expect(onChangeTextMock).not.toHaveBeenCalled();
+});
+
 test('should not fire on non-editable TextInput with nested Text', () => {
   const placeholder = 'Test placeholder';
   const onChangeTextMock = jest.fn();

src/fireEvent.ts

@@ -1,5 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import act from './act';
+import { filterNodeByType } from './helpers/filterNodeByType';
 
 type EventHandler = (...args: any) => unknown;
 
@@ -8,8 +9,21 @@ const isHostElement = (element?: ReactTestInstance) => {
 };
 
 const isTextInput = (element?: ReactTestInstance) => {
+  if (!element) {
+    return false;
+  }
+
   const { TextInput } = require('react-native');
-  return element?.type === TextInput;
+  // We have to test if the element type is either the TextInput component
+  // (which would if it is a composite component) or the string
+  // TextInput (which would be true if it is a host component)
+  // All queries but the one by testID return composite component and event
+  // if all queries returned host components, since fireEvent bubbles up
+  // it would trigger the parent prop without the composite component check
+  return (
+    filterNodeByType(element, TextInput) ||
+    filterNodeByType(element, 'TextInput')
+  );
 };
 
 const isTouchResponder = (element?: ReactTestInstance) => {

src/helpers/filterNodeByType.ts

@@ -3,5 +3,5 @@ import * as React from 'react';
 
 export const filterNodeByType = (
   node: ReactTestInstance | React.ReactElement,
-  type: React.ElementType
+  type: React.ElementType | string
 ) => node.type === type;