diff --git a/src/__tests__/fireEvent.test.tsx b/src/__tests__/fireEvent.test.tsx index a8a7dca84..30afd8848 100644 --- a/src/__tests__/fireEvent.test.tsx +++ b/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( + + ); + + 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(); diff --git a/src/fireEvent.ts b/src/fireEvent.ts index 0f95381e4..2da697383 100644 --- a/src/fireEvent.ts +++ b/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) => { diff --git a/src/helpers/filterNodeByType.ts b/src/helpers/filterNodeByType.ts index 751e73b3f..1330d41c5 100644 --- a/src/helpers/filterNodeByType.ts +++ b/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;