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: https://github.com/gassiss/stencil-jest
I’ve essentially just glued together the initial boilerplate from Vue and StencilJS.
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!