toBeDisabled() matcher ignores ARIA hints

[crizzis]

• @testing-library/jest-dom version: 5.14.3
• node version: 16.13.2
• npm (or yarn) version: 8.1.2

Relevant code or config:

import { Select } from '@mui/material';
...
<FormControl>
    <InputLabel htmlFor={fieldName}>{label}</InputLabel>
    <Select label="Species" disabled>{options}</Select>
</FormControl>

What you did:

expect(screen.getByLabelText('Species')).toBeDisabled();

What happened:

Error: expect(element).toBeDisabled()

Received element is not disabled:
<div aria-describedby="SpeciesHelperText" aria-disabled="true" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="Species" class="MuiSelect-select MuiSelect-outlined Mui-disabled MuiOutlinedInput-input MuiInputBase-input Mui-disabled css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input" id="Species" role="button" />

Problem description:

This is an issue because there seems to be no workaround other than explicitly inspecting the aria-disabled attribute

Suggested solution:

At the very least, provide an option to customize the global matcher behavior, to customize the logic for determining whether a given component is disabled

[AndersonSMed]

Hello, this behavior was already discussed in this issue and the conclusion was to use the toHaveAttribute matcher as a workaround to check if the element is disabled due to the presence of an aria-disabled attribute.

https://github.com/testing-library/jest-dom#tobedisabled
https://github.com/testing-library/jest-dom#tohaveattribute