I have the MUI react select box like below.
<MenuItem key={`${option.label}-${option.value}-${i}`} value={option.value}>
{option.labelName}{option.labelDescription}
</MenuItem>
which i have updated like below to add class for CSS styling
<MenuItem key={`${option.label}-${option.value}-${i}`} value={option.value}>
<span className={`${classes.name}`} data-testid="select-name">{option.labelName}</span>
<span className={`${classes.description}`} data-testid="description">{option.labelDescription}</span>
</MenuItem>
I have the unit test cases which is failing after adding the span
const nameOption = await findByText("John");
expect(nameOption).toBeInTheDocument();
await act(async () => {
fireEvent.click(nameOption);
});
expect(nameOption).toHaveAttribute("aria-selected", "true");
I am getting the following error after adding the span
'Expected the element to have attribute: aria-selected="true"
Received:null'
Can anyone help me fix this issue.