如何對自定義元素進行單元測試

Question

我有一個擴展HTMLElement的類。 從閱讀這個線程

https://github.com/Microsoft/TypeScript/issues/574#issuecomment-231683089

我看到我不能實例化一個自定義元素而沒有得到一個Illegal constructor 。 另外， registerElement看起來很有前途，因為它返回了自定義元素的構造函數，但現在不推薦使用CustomElementRegistry.define() ，它存在於window對象上，並且返回void。 任何解決方案將不勝感激，謝謝。

對於這個特定的設置，我試圖使用本機自定義元素而不是Web組件框架，因為我只需要自定義元素。 此外，我正在使用TypeScript並嘗試使用Jest來測試它。

Answer 1

根據您的元素所做的事情，您可以考慮將設計原則“關注點分離”和“控制反轉”考慮在內。

當在不同的類中實現不同的事物時，將實現關注的分離。 這也意味着可以在不實例化具體HtmlElement的情況下測試分離的東西。

控制的反轉在這一點上派上用場，因為如果可以從類外部設置分離類（可能是HtmlElement）的依賴關系，則可以通過給測試實例提供存根來輕松地存根或模擬HtmlElement。

我們的想法是設計您的代碼，使其獨立於單元測試中無法訪問或控制的內容。