Mocha Webcomponents测试 - ReferenceError: customElements is not defined.

Question

我想用typescript和mocha做一些非常基本的webcoponnets测试。我使用jsdom来模拟基本的全局文档，所以我有 --require jsdom-global/register 在我的moch opts。

这是我的测试。

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() 和你想测试的代码没有区别。