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

Question

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.

score 2 · Accepted Answer · answered Jan 23 '23 at 12:49

2

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.

answered Jan 23 '23 at 12:49

Matthieu Riegler

31,918
20
95
134

I was running it from the console, so I assume it uses a headless chrome which I couldn't update. However, to ensure it will run the same everywhere, I did some workaround up until it is generally supported. Thanks for the help! – gulyasfeccferenc Feb 16 '23 at 09:08

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

1 Answers1