'不受支持的类型：悬停'和'未知的伪类选择器：可见'

Question

我无法在jsdom测试环境中使用带有伪类的选择器。 有什么技巧可以做到这一点或进行一些强制性配置吗？

例如，如果我执行$("button:hover")我会收到错误消息：

语法错误，无法识别的表达式：不支持的伪：hover

如果我执行document.querySelectorAll("div.testingDivs:not(:visible)")我会收到错误消息：

未知的伪类选择器 ':visible'

这是一些带有示例的代码： demo project

我已经注意到这个问题与nwsapi插件有关。 似乎jsdom没有注册伪类选择器，我认为这应该在文件jsdom\lib\jsdom\living\helpers\selectors.js中进行。 在此文件中， nwsapi插件仅被初始化，而在nwsapi.js文件中，选择器保存在属性Selectors中。 由于nwsapi仅在未注册任何选择器的情况下进行初始化，因此Selectors始终为空，并且我收到“ unknown pseudo-class selector ':visible' ”错误消息。

在Jest测试设置之前我已经尝试这样做了：

const _nwsapi = require("nwsapi"),
  NW = _nwsapi({
    document: window.document,
    DOMException: global.DOMException
  });

window.NW = {Dom: NW};

require("nwsapi/src/modules/nwsapi-jquery");

几乎成功了， Selectors充满了那个文件中的案例。 但是，当我使用选择器时， jsdom初始化nwsapi并且Selectors再次设置为空 object。

我的项目在组件内部有这种选择器，而不是在测试内部。

有人对此有解决方案吗？

问题打开： https://github.com/jsdom/jsdom/issues/3477

Answer 1

:hover当鼠标（或其他指针设备）指向一个元素时触发。 您无法在 DOM 中搜索鼠标在 JSDOM 中指向的元素，因为没有鼠标！

:visible不是 CSS 选择器。 这是一个 jQuery 分机。 您没有使用 jQuery。您可以找到与div.testingDivs匹配的所有内容，然后根据您可能说过导致:visible不匹配（例如测试高度或显示）的条件对其进行过滤。

Answer 2

我发现这个非常有用的链接https://levelup.gitconnected.com/when-jsdom-for-testing-ui-its-not-enough-c53a8f8c4638说：

假设您有一个 Slider 组件，您想要将其中一个手柄拖动一些像素并检查是否发生了变化。 你不能在 JSDOM 中真正做到这一点。 因为你真的不能拖你的手柄。 无限滚动组件也是如此。 或者测试像这样的伪状态：hover，:active。 你根本做不到。 出色地。 你可以……但你应该嘲笑一切……有时结果还不够好。

很难测试此类组件的原因很简单：缺乏布局功能。 JSDOM 是 DOM 的纯 javascript 实现，因此它甚至没有被设计为像真正的浏览器一样运行。 它用于进行一些单元测试。 这样做很棒，速度很快。 但是对于一些特殊的组件，我们需要更多。 我们需要一个真正的浏览器。 如果我们能拥有所有三个主要引擎，那就更好了:)

我仍然相信，如果 JSDOM 将文件jsdom\lib\jsdom\living\helpers\selectors.js更改为这样的内容，至少伪类问题将得到解决：

function initNwsapi(node) {
  const { _globalObject, _ownerDocument } = node,

  apiResult = nwsapi({
    document: _ownerDocument,
    DOMException: _globalObject.DOMException
  });

  require("nwsapi/src/modules/nwsapi-jquery");

  return apiResult;
}

无论如何，还有一些其他问题。

因此，我尝试通过删除伪 class 并搜索 class（如“ isHovered ”）来更改选择器。 请记住，选择器是在组件内部使用的，而不是在测试内部使用的。

在某些情况下，class 存在于另一个不是“ :hover ”的元素中，因此我尝试将focus事件和mouseover事件绑定到该元素并添加 class，如“ thisIsReallyHovered ”。 但这效果不佳，我也尝试使用document.activeElement但没有取得更大的成功。

所以就像那篇文章所建议的那样，我搜索了一些其他类型的测试环境，比如： Selenium 、 Puppeteer 、 Playwright 、 Cypress ...

我尝试在我的项目中使用jest实现Puppeteer ，但我发现了其他问题。

所以，由于（在我的例子中）这种测试环境的实现是不可取的，我们同意重新考虑测试以避免那部分代码，直到我们的代码迁移完成并且我们改变了那个组件，只实现单元测试。