Tengo un componente que representa un control flotante como el siguiente código HTML una vez que se abre el control flotante. Me gustaría escribir la prueba usando test-library para verificar que el valor aria-expanded sea false después de hacer clic en el elemento flotante. ¿Hay alguna forma mejor de verificar el aria expandido?
// 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')Podrías usar la opción getByRole() expanded: false así
expect( screen.getByRole("button", { name: "Flyout button", expanded: false, }) ).toBeInTheDocument();