Mocha Webcomponents testing - ReferenceError: customElements is not defined

Mocha Webcomponents testing - ReferenceError: customElements is not defined

我正在尝试使用 typescript 和 mocha 进行一些非常基本的 webcoponnets 测试。我正在使用 jsdom 来模拟全局的基本文档,所以我的 moch 选项中有 --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.customElementscustomElements。前一种语法有效,但我要测试的代码使用后一种语法。有什么区别?

浏览器上下文中,window.customElementscustomElements之间没有区别,因为window是全局定义的变量的默认命名空间.

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

测试 JSDoc 库在 Node.js 上下文中执行,它不是浏览器,因此不会将 window 作为其全局 /默认命名空间。

但是 JSDoc 通过 window 属性 公开了一个 模拟的 浏览器上下文。所以您可以使用 window.customElements() 并且与您尝试测试的代码没有区别。