Mocha Webcomponents测试-ReferenceError:customElements未定义

Question

我正在尝试使用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.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()，并且与您尝试测试的代码没有区别。