I am writing a test for a simple svelte component. It goes like this:

it('opens and closes correctly', async () => {
render(Menubar, { menuData: menu_with_items });
const menuButton = screen.getByRole('button', { name: 'menu-item-1' });
expect(menuButton).toHaveAttribute('aria-expanded', 'false');
fireEvent.click(menuButton);
await waitFor(() => expect(menuButton).toHaveAttribute('aria-expanded', 'true'));
});

With output:

expect(element).toHaveAttribute(“aria-expanded”, “true”) //
element.getAttribute(“aria-expanded”) === “true” Expected the element
to have attribute: aria-expanded=”true” Received:
aria-expanded=”false”

I tried checking with screen.debug() and the ‘aria-expanded’ attribute of the element is always equal to false, the component is working accordingly. Am I doing something wrong? Is there another approach?