Jest 的语法错误：未知的伪类选择器 \':has()\'答案

【问题标题】：SyntaxError with Jest: unknown pseudo-class selector ':has()'Jest 的语法错误：未知的伪类选择器 \':has()\'
【发布时间】：2023-01-23 20:49:28
【问题描述】：

我有一个 Angular (v15.0.0) 组件，它收集所有符合 CSS 标准的 DOM 元素。创建它是为了在 3rd 方组件和我的自定义组件上实现相同的效果。

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'
            );
        }
...

但是，当我尝试使用 Jest 测试此功能时，出现以下错误：

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)

我试图重组这部分。我的第一个意图是添加我自己的类作为一个额外的步骤，但它需要额外的事件处理程序和更多其他不必要的代码。另一种方法是提升此选择器并在测试运行时覆盖其内容，但它看起来很老套。

【问题讨论】：

标签： angular jestjs primeng ts-jest primeng-menu

【解决方案1】：

Jest 在这里没有错，而是你运行单元测试所针对的运行时。在撰写此答案时，伪选择器 :has 的支持是 only partial。

如果您针对 Firefox 运行，则需要启用标志 layout.css.has-selector.enabled。如果是 headless chrome，你需要更新到 >= 105 版本。

【讨论】：