I need assistance with testing a flyout component using test-library to verify the aria-expanded attribute value. After clicking on a flyoutItem, I want to ensure that the value of aria-expanded is set to false. Is there a more efficient way for me to accomplish this validation?
// Component
<body>
<div>
<div >
<button aria-expanded="true" class="btn">
Flyout button
</button>
<div class="flyoutContainer>
<ul class="flyoutItem" role="listbox" >
<li aria-selected="false" class="item" role="option" >
<div class="option" >
<span >Data is here</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
// Test
render(<flyout />);
const item = screen.getByText(/Data is here/, {selector: 'span'});
fireEvent.click(item);
const flyoutButton = screen.getByRole('button', {name: 'Flyout button'});
expect(flyoutButton).toHaveClass('aria-expanded').;
expect(flyoutButton).toHaveAttribute('aria-expanded', 'false')