title: How to test the value of TextInput in react-native
body: <p>I followed the chosen answer in <a href="https://stackoverflow.com/questions/51750611/testing-textinput-component-in-react-native">this</a> thread, but I couldn't figure it out. I want to test the value of a <code>TextInput</code> component so I could check the length of it, what is the proper way to achieve this today? <br>
  My component looks something like this:</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import {TextInput} from 'react-native';
  
  export default function TextInputComponent(props) {
      const [text, setText] = useState('');
  
      useEffect(() =&gt; {
          props.text ? setText(props.text) : setText('');
      }, []);
  
      const handleInputTextChange = text =&gt; {
          setText(text);
      };
  
      return (
          &lt;TextInput
              onChangeText={text =&gt; handleInputTextChange(text)}
              value={text}
              maxLength={maxLength}
              testID=&quot;text-input&quot;
          /&gt;
  
      );
  }
  </code></pre>
  <p>And the test file I constructed so far:</p>
  <pre><code>import React from 'react';
  import renderer from 'react-test-renderer';
  import {render} from 'react-native-testing-library';
  import TextInputComponent from 'components/textInputComponent/textInputComponent';
  
  describe('&lt;TextInputComponent /&gt;', () =&gt; {
      it('renders correctly', () =&gt; {
          renderer.create(&lt;TextInputComponent /&gt;);
      });
  
      it('should show &quot;AAA&quot; with text=&quot;AAAA&quot; and maxLength=&quot;3&quot; props', () =&gt; {
          const props = {
              text: 'AAAA',
              maxLength: 3,
          };
  
          const {queryByTestId} = render(&lt;TextInputComponent {...props} /&gt;);
  
          const textInput = queryByTestId('text-input');
  
          console.log(textInput);
      });
  });
  </code></pre>