Support "editable" on TextInput

[thymikee]

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();
});

[pplytas]

Hi @thymikee, I'd like to tackle this one.

[thymikee]

@pitpitpat go for it!

[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]

@douglasjunior we have 2 tests for this scenario which are passing on our infra. Mind investigating on your side, reducing it to a minimal setup and see if some 3rd-party code doesn't interfere? Btw, there's no need to wrap fireEvent with act, it's done under the hood

[douglasjunior]

Hi @thymikee, thank you for the quick response!

I've just tested on a new project here.

Create a new RN 0.68.2 project using TypeScript template:

npx react-native init TestingLibrarySample --template react-native-template-typescript@6.10.4

Add testing-library:

yarn add -D @testing-library/react-native

Edit the __tests__/App-test.tsx to add:

  it('test TextInput native', () => {
    const handleFocus = jest.fn();

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

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

    fireEvent(rnTextInput, 'focus');

    expect(handleFocus).not.toBeCalled();
  });

Run tests:

yarn test

Sample project: https://github.com/douglasjunior/TestingLibrarySample

Other people with similar problem: https://stackoverflow.com/q/65625330/2826279

Thanks!

[thymikee]

Would you be able to create a PR with this test failing?

[douglasjunior]

Would you be able to create a PR with this test failing?

Sure.

---

I think I figured out the problem, if using "placeholder" instead of "testID" works as expected.

  it('test TextInput native by placeholder', () => {
    const handleFocus = jest.fn();

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

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

    fireEvent(rnTextInput, 'focus');

    expect(handleFocus).not.toBeCalled(); // <--- pass
  });

  it('test TextInput native by testID', () => {
    const handleFocus = jest.fn();

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

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

    fireEvent(rnTextInput, 'focus');

    expect(handleFocus).not.toBeCalled(); // <--- fail
  });

[thymikee]

Thanks! Looking forward to the PR :)

[douglasjunior]

Done #1080

[douglasjunior]

Another scenario that's don't work as expected is when wrapping with withTheme from @callstack/react-theme-provider, even using getByPlaceholderText:

  it('test TextInput native by custom component', () => {
    const CustomTextInput: React.FC<{ theme: AppThemeType } & TextInputProps> = props => <TextInput testID="rn-text-input" {...props} />;

    const CustomInputWithTheme = withTheme(CustomTextInput);

    const handleFocus = jest.fn();

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

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

    fireEvent(rnTextInput, 'focus');

    expect(handleFocus).not.toBeCalled(); // <--- fail
  });