How to test Material-UI Checkbox is checked with react-testing-library?
Since the checkbox is rendering an input
I would work with it rather than focusing on the image.
You could do something like this:
const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]')
expect(checkbox).toHaveProperty('checked', true)
The easiest way I have found to locate a checkbox is by adding a label to it
<FormControlLabel
htmlFor="first-checkBox"
label="First Checkbox"
control={ <Checkbox
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
}
/>
later in test case
const checkboxEl = screen.getByLabelText('First Checkbox') as HTMLInputElement
expect(checkboxEl).toBeChecked()
if the test fails because doesn't recognize toBeChecked as part of the available assertions is because you need to import
import '@testing-library/jest-dom/extend-expect'