How to render Stencil WebComponents in Jest environment?


First of all, thank you in advance for your support!

I’m trying to render WebComponents created using StencilJS in a Vue app in Jest environment, but I can’t seem to get it to work.

I’ve put up a minimum repo that you can check here:
I’ve essentially just glued together the initial boilerplate from Vue and StencilJS.

If you cd into hello-world folder and run npm run serve and run window.customElements.get('my-component') in the browser’s console, you’ll see that defineCustomElements function call works as intended.

The problem is in test environment. Please refer to example.spec.js line 10, which is commented out. When you run the tests, the console.log on line 14 returns undefined. Enable line 10 and it returns a web component.

I’ve tried looking everywhere, but it’s a very tricky topic to research for, as all I get is how to use Jest to test StencilJS components from the perspective of the person creating the Design System, but not from the perspective of the one using it.

Any help is greatly appreciated!