SyntaxError with Jest: unknown pseudo-class selector ':has()'

I have an Angular (v15.0.0) component, which collects all DOM elements matching a CSS criteria. It is created to achieve the same effects on a 3rd party component and my custom components.

handleOpenMenusListener(event: MouseEvent) {
        const target = event.target as Element;

        if (target && target.classList.contains('p-panelmenu-header-link')) {
            const allActiveLink = this.el.nativeElement.querySelectorAll(
                '.p-panelmenu-panel:has(.p-toggleable-content.p-panelmenu-expanded) .p-panelmenu-header-link, .my-custom-nav:has(.p-panelmenu-expanded) .my-custom-trigger'
            );
        }
...

However, when I tries to test this function with Jest, I got the following error:

SyntaxError: unknown pseudo-class selector ':has(.p-toggleable-content.p-panelmenu-expanded)'
    at emit (C:\Projects\myproject\node_modules\nwsapi\src\nwsapi.js:570:17)
    at compileSelector (C:\Projects\myproject\node_modules\nwsapi\src\nwsapi.js:1297:17)
    at compile (C:\Projects\myproject\node_modules\nwsapi\src\nwsapi.js:758:16)
    at collect (C:\Projects\myproject\node_modules\nwsapi\src\nwsapi.js:1563:22)
    at Object._querySelectorAll [as select] (C:\Projects\myproject\node_modules\nwsapi\src\nwsapi.js:1523:36)
    at HTMLDivElementImpl.querySelectorAll (C:\Projects\myproject\node_modules\jsdom\lib\jsdom\living\nodes\ParentNode-impl.js:78:26)
    at HTMLDivElement.querySelectorAll (C:\Projects\myproject\node_modules\jsdom\lib\jsdom\living\generated\Element.js:1119:58)
    at MenuComponent.handleOpenMenusListener (C:\Projects\myproject\src\app\@shared\menu\menu.component.ts:58:57)

I have tried to restructure this part. My first intention was to add my own classes as an extra step but it would require additional event handlers and more otherway unnecessary code. The other way was to elevate this selector and overwrite its content on the test run, however it seemed hacky.

Jest isn't at fault here but the runtime against whom you are running your unit tests. The support of the pseudoselector :has is only partial at the time of writing this answer.

If you're running against Firefox you'll need to enable the flag layout.css.has-selector.enabled. If it's headless chrome, you'll need to update to a version >= 105.