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 type="password". I understand that, in tests, it's not a good practice to default to getting an element using testId field, but I cannot find a way to get to the password input field. I cannot use getByRole because apparently <input type="password"> doesn't have a role. There is no text in the input box, nor placeholder text, and when I try to use getByLabelText I'm getting this error message:
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 "for" attribute or "aria-labelledby" attribute correctly. When I reviewed the rendered elements in the test (I used screen.debug()), I realize that this is how Material-UI composes the TextField:
<div> <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth" > <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" > Password </label> <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl" > <input aria-invalid="false" class="MuiInputBase-input MuiInput-input" name="pass" type="password" value="" /> </div> </div> </div>So, the <input> is not embedded inside the <label> and also the label doesn't have a for attribute to associate it with the input. So, how else would I be able to get a hold of that password box without using testId?
