I'm testing a component (let's call it MyComponent) which contains a Material Ui TextField component:
<TextField
name="code"
aria-label="code"
onKeyPress={keyPressHandler(codeRegExp)}
value={values.code}
placeholder={codePlaceholder}
onChange={handleChange}
InputProps={{
classes: {
input: classes.code,
},
}}
onBlur={handleBlur}
helperText={
touchedValues.code && errorValues.code ? errorValues.code : ''
}
FormHelperTextProps={{classes: {root: classes.errorMessage}}}
/>
I wrote the test for that:
test('Checking the initial rendering of the component', () => {
const initialState = {
refs: {
choice: '',
creationDate: '',
},
};
render(<MyComponent />, {initialState});
expect(screen.getByRole('textbox', {name: /code/i})).toBeInTheDocument();
});
The test fails and I got this error:
TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name `/code/i`
Here are the accessible roles:
textbox:
Name "":
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input makeStyles-code-9"
name="code"
placeholder="ABC_123"
type="text"
value=""
/>
Should I add the role=textbox
for the TextField Component or does the textbox
role does not works with input elements?
You can see from the test output that your input
element does not have aria-label
. This causes the accessibility name to be an empty string ""
.
As per docs I think you want one of the following
<TextField inputProps={{ 'aria-label': 'code' }} />
or
<TextField label="code" />
It is a good rule of thumb to try make it work without relying on aria properties first--and then using them if there is no other way. Read more
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.