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

Question

我正在尝试使用 typescript 和 mocha 进行一些非常基本的 webcoponnets 测试。我正在使用 jsdom 来模拟全局的基本文档，所以我有 --require jsdom-global/register在我的 moch 选项中。

这是我的测试:

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 公开模拟浏览器上下文属性(property)。所以你可以使用 window.customElements()并且与您尝试测试的代码没有区别。