React Testing Library- Expected the element to have attribute: aria-selected="true" Received: null

Viewed 448

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.

0 Answers
Related