Support "editable" on TextInput

Describe the Feature

TextInput component from react-native has its own handling of being disabled/editable. It’s not using responder system like Views, Texts and thus Touchables, so the logic we have already fails to catch it.

We should consider adding custom handling specific to native TextInput component, since it was working with @testing-library/react-native before v7.

Possible Implementations

Will likely involve detecting TextInput and verify if it’s editable or not.

Test that fails with current implementation:

test('should not fire on disabled TextInput', () => {
  const handleChangeText = jest.fn();

  const screen = render(
    <TextInput onChangeText={handleChangeText} editable={false}>
      <Text>Trigger</Text>
    </TextInput>
  );

  fireEvent.changeText(screen.getByText('Trigger'), 'Trigger');
  expect(handleChangeText).not.toHaveBeenCalled();
});

[douglasjunior]

fireEvent(textInput, 'focus') still working when editable={false} 😢

I’m using version 11.0.0.

    const handleFocus = jest.fn();

    const result = render(
      <TextInput
        testID="my-input"
        onFocus={handleFocus}
        editable={false}
      />,
    );

    const rnTextInput = result.getByTestId('my-input');

    act(() => {
      fireEvent(rnTextInput, 'focus');
      // or fireEvent(rnTextInput, 'click');
      // or fireEvent.press(rnTextInput);
    });

    expect(handleFocus).not.toBeCalled();

Result:

[thymikee]

@pitpitpat go for it!