title: react native Unable to find an element with the testID
body: <p>I'm getting this error:</p>
  <blockquote>
  <p><code>Unable to find an element with the testID of: input-text</code></p>
  </blockquote>
  <p><strong>Input.js</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { View, StyleSheet } from &quot;react-native&quot;;
  import { Text, TextInput } from &quot;react-native-paper&quot;;
  
  const Input = (props) =&gt; {
    return (
      &lt;View&gt;
        &lt;TextInput
          name={props.name}
          keyboardType={props.keyboardType}
          value={props.value}
          label={props.label}
          mode=&quot;outlined&quot;
          onChange={(newVal) =&gt; props.onChange(props.name, newVal)}
          required={props.required}
          data-testid=&quot;input-text&quot;
        /&gt;
        &lt;Text&gt;{props.errors}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  export default Input;
  </code></pre>
  <p><strong>Input-test.js</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { Input } from &quot;../components/common&quot;;
  
  import { render, fireEvent } from &quot;@testing-library/react-native&quot;;
  
  import renderer from &quot;react-test-renderer&quot;;
  
  const setup = () =&gt; {
    const utils = render(&lt;Input /&gt;);
    const input = utils.getByTestId(&quot;input-text&quot;);
    return {
      input,
      ...utils,
    };
  };
  
  test(&quot;It should display empty value&quot;, () =&gt; {
    const { input } = setup();
    fireEvent.change(input, { target: { value: &quot;&quot; } });
    expect(input.value).toBe(&quot;&quot;);
  });
  </code></pre>
  <p>The reason I'm using <code>getByTestId</code> is because the input name is dynamic,
  it is rendered multiple times with using forms,
  therefore I cannot use anything else.</p>
  <p>What am I doing wrong?</p>
  <p>Thanks for the help.</p>