Is it possible to test the contents of a TextInput?

[charlestbell]

I'm trying to test whether some text inputs get preloaded with data.

So far I've tried:

const myInput = await findByText('myText')

but this doesn't work for some reason.
I've debugged it, and they text input appears, with the inital text value exactly as it should be.
This is pulled directly from the debug:

 <TextInput
                allowFontScaling={true}
                editable={true}
                id="name"
                initialValue="Youspan"
                label="Name"
                maxLength={48}
                onBlur={[Function lostFocusHandler]}
                onChangeText={[Function textChangeHandler]}
                onInputChange={[Function anonymous]}
                placeholder="Name"
                rejectResponderTermination={true}
                style={
                  Object {
                    "marginLeft": 2,
                  }
                }
                testID="entryScreen.trainingGoal"
                underlineColorAndroid="transparent"
                value="Youspan"
              />

That initalValue 'Youspan' is exactly what I was testing for.

I even tried putting await act(flushMicrotasksQueue); in front of it.

What is supposed to work in this situation?

[mdjastrzebski]

Not sure if I understand your question correctly, but let's try. Your goal is to check whether the TextInput value is as you expected after some test initialization.

I'm getting this test to pass correctly:

test('repro', async () => {
  const onChangeTest = jest.fn();
  const onInputChange = jest.fn();

  const view = render(
    <TextInput
      allowFontScaling={true}
      editable={true}
      id="name"
      initialValue="Youspan"
      label="Name"
      maxLength={48}
      onChangeText={onChangeTest}
      onInputChange={onInputChange}
      placeholder="Name"
      rejectResponderTermination={true}
      style={{ marginLeft: 2 }}
      testID="entryScreen.trainingGoal"
      underlineColorAndroid="transparent"
      value="Test Text"
    />
  );

  const myInput = view.getByTestId('entryScreen.trainingGoal');
  expect(myInput.props.value).toEqual('Test Text');
});

Things to note:

• you need to get access to your TextInput rendered instance. You can use testID or any of the other queries like getByAccessibilityLabel, etc Note that getByText does not work with TextInput content.
• since your TextInput is managed by externally passed value prop, you can check the value of the prop inside assertion.

Hope that helps, if you no, please provide repro repository so we have a concrete example to work in.

[charlestbell]

Thanks for the reply! I did just start using testIds

[friederbluemle]

While this is an older thread, just wanted to leave this here for future visitors.

At least the newer versions of RNTL allow this check to be performed in a more idiomatic way, without directly accessing props:

expect(screen.getByDisplayValue('Youspan')).toBeOnTheScreen();

(assuming Youspan is the expected value of your TextInput).

[mdjastrzebski]

Good point, generally there are two ways of checking for text input value:

1. Finding the text input control by current value (as you suggested)
2. Finding the text input by some handle (e.g. getByPlaceholder, getByLabelText, getByTest and the checking if it contact the expected value using toHaveDisplayValue from included Jest matchers:

expect(screen.getByPlaceholder("Username")).toHaveDisplayValue("admin");