getByRole does not work in some cases

[roman-gula]

Describe the bug
Hi! I use Vite with MUI and noticed that with happy-dom my test fails. With jsdom it works.
I can't find what is the problem. Please see code below

To Reproduce

it('with Accordion', () => {
  render(
    <Accordion>
      <AccordionSummary>aaa</AccordionSummary>
    </Accordion>
  );

  expect(screen.getByRole('button')).toBeInTheDocument();
});

Example on Stackblitz

[DavidRNogueira]

I also have this issue when using different component libraries. The issue seems to be that HappyDOM may not be looking at the role attribute, but rather its only looking at the actual element type? The component library is also using a div with role="button" and HappyDOM does not pick it up properly.

[capricorn86]

Thank you for reporting @roman-gula and @DavidRNogueira! 🙂

A fix has been released:
https://github.com/capricorn86/happy-dom/releases/tag/v13.8.5

The reason for why it failed to match the element is because Testing Library checks if the element is visible by using Window.getComputedStyle(), which returned display: none for the button element. The button element had display: none as a CSS rule with the pseudo selector ":before" matched the actual element (and not the pseudo element), but shouldn't have.