What causes "assignedElements is not a function" in this Stencil.js Jest test?

Viewed 443

I am getting an error in Jest test cases that says assignedElements is not a function. In the code, I am trying to query slots and then fetch the value as mentioned below:

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

This code is working fine on most of the browsers, but it is failing in Jest test cases. I thought of mocking and spying on this API, but no luck there either.

1 Answers

Some environments may not have slot.assignedElements yet, but it is super easy to polyfill on top of slot.assignedNodes:

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