'不受支持的類型：懸停'和'未知的偽類選擇器：可見'

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 ，但我發現了其他問題。

所以，由於（在我的例子中）這種測試環境的實現是不可取的，我們同意重新考慮測試以避免那部分代碼，直到我們的代碼遷移完成並且我們改變了那個組件，只實現單元測試。