title: How to get a Material-UI password input in React Testing Library
body: <p>I'm using Material-UI and React Testing Library in a project and I'm having a hard time with TextField that is set to <code>type=&quot;password&quot;</code>. I understand that, in tests, it's not a good practice to default to getting an element using <code>testId</code> field, but I cannot find a way to get to the password input field. I cannot use <code>getByRole</code> because apparently <code>&lt;input type=&quot;password&quot;&gt;</code> doesn't have a role. There is no text in the input box, nor placeholder text, and when I try to use <code>getByLabelText</code> I'm getting this error message:</p>
  <pre><code>TestingLibraryElementError: Found a label with the text of: Password, however no form control was found associated to that label. Make sure you're using the &quot;for&quot; attribute or &quot;aria-labelledby&quot; attribute correctly.
  </code></pre>
  <p>When I reviewed the rendered elements in the test (I used <code>screen.debug()</code>), I realize that this is how Material-UI composes the TextField:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div
        class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
      &gt;
      &lt;label
        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
        data-shrink="false"
      &gt;
        Password
      &lt;/label&gt;
      &lt;div
        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
      &gt;
        &lt;input
          aria-invalid="false"
          class="MuiInputBase-input MuiInput-input"
          name="pass"
          type="password"
          value=""
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So, the <code>&lt;input&gt;</code> is not embedded inside the <code>&lt;label&gt;</code> and also the label doesn't have a <code>for</code> attribute to associate it with the input. So, how else would I be able to get a hold of that password box without using <code>testId</code>?</p>