Mocha Webcomponents 測試 - ReferenceError: customElements is not defined

Question

我正在嘗試使用 typescript 和 mocha 進行一些非常基本的 webcoponnets 測試。 我正在使用 jsdom 來模擬全局的基本文檔，所以我的 moch opts 中有--require jsdom-global/register 。

這是我的測試：

import { assert } from "chai";

class WordCount extends HTMLParagraphElement {
  constructor() {
    super();
  }
}

describe("simple test", () => {
    it("works", () => {
      customElements.define('word-count', WordCount, { extends: 'p' });
      assert.isOk(true);
    });
});

但我收到以下錯誤：

ReferenceError: customElements is not defined

最新版本的 JSDom（我正在使用）支持customElements 。 我認為問題歸結為window.customElements與customElements 。 前一種語法有效，但我嘗試測試的代碼使用后一種語法。 有什么不同？

Answer 1

在瀏覽器上下文中， window.customElements和customElements之間沒有區別，因為window是全局定義的變量的默認命名空間。

var my_var = 'foo"
console.log( window.my_var ) //foo
console.log( window.customElement === customElement )

測試 JSDoc 庫在Node.js上下文中執行，該上下文不是瀏覽器，因此不會將window公開為其全局/默認命名空間。

然而， JSDoc通過window屬性公開了一個模擬的瀏覽器上下文。 因此，您可以使用window.customElements()並且您嘗試測試的代碼沒有區別。