是什么导致此 Stencil.js Jest 测试中的“assignedElements 不是函数”？答案

【问题标题】：What causes "assignedElements is not a function" in this Stencil.js Jest test?是什么导致此 Stencil.js Jest 测试中的“assignedElements 不是函数”？
【发布时间】：2021-09-15 14:51:50
【问题描述】：

我在 Jest 测试用例中遇到错误，显示为 assignedElements is not a function。在代码中，我尝试查询插槽，然后获取如下所述的值：

let slot = this.element.shadowRoot?.querySelector('slot');
const testItems = slot.assignedElements({flatten:true});

这段代码在大多数浏览器上运行良好，但在 Jest 测试用例中却失败了。我想过嘲笑和监视这个 API，但也没有运气。

【问题讨论】：

这是在规范还是 e2e 测试中？
这是在规范测试中
好的，我会在 Stencil Github 存储库中提出错误报告。请注意，在运行规范测试时，没有浏览器上下文。相反，DOM 是在 Node.js 上下文中模拟的（我认为使用 jsdom 包），因此它的行为可能与浏览器不完全相同。与此同时，您可能会切换到 e2e 测试。
我在单元（规范）测试中遇到了同样的问题。我还没有尝试过 e2e 测试。有人建议使用 e2e 测试这样的组件，但我正在阅读 Stencil 的问题，即人们在 e2e 测试中遇到相同/类似的问题。

标签： jestjs stenciljs

【解决方案1】：

有些环境可能还没有slot.assignedElements，但是在slot.assignedNodes 之上进行polyfill 非常容易：

if (!HTMLSlotElement.prototype.assignedElements) {
    HTMLSlotElement.prototype.assignedElements = function (...args) {
        return HTMLSlotElement.prototype.assignedNodes
            .apply(this, args)
            .filter((n) => n instanceof Element)
    }
}

【讨论】：

你把这个 polyfill 放在哪里让它在测试运行期间触发？你也在使用 Stencil 吗？为了清楚起见，只是好奇和好奇。这似乎是一个很好的解决方案，我真的知道把它放在最有意义的地方。
@LoganRichardson 取决于您的设置。我没有使用模板。您必须在加载 jsdom 之后但在测试之前运行该代码。
@LoganRichardson Stencil 测试指南指向 Jest 配置指南。查看 globalSetup 以开始获取想法：jestjs.io/docs/configuration#globalsetup-string。底线不是关于 Jest，而是关于 jsdom。 jsdom 提供了虚假的 DOM 环境，这就是需要修补的地方。所以我认为在 Jest 的情况下， globalSetup 是一种方法（我假设 jsdom 已经加载，并且 globalSetup 在你的测试之前发生）。