Is there a way to test a custom element (using WCT) which includes an external module (let's say a npm one) or another custom element?
For instance I'm trying to test a custom element that looks like:
// ~/root/src/index.js
import CustomElementChildren from '~/path-to-children';
import NpmModule from 'npm-module';
export default class CustomElement extends HTMLElement {
constructor() {
super();
if(!customElements.get('custom-element-children')){
customElements.define('custom-element-children', CustomElementChildren);
}
}
// implement some methods that are related with "NpmModule"
connectedCallback() {
this.initShadowDom();
}
initShadowDom() {
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = this.template;
}
get template() {
return `
<div><custom-element-children></custom-element-children></div>
`
}
}
// ~/root/test/index-test.html
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<script src="https://unpkg.com/@webcomponents/shadydom"></script>
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<script src="../node_modules/web-component-tester/browser.js"></script>
<script type="module" src="../src/index.js"></script>
</head>
<body>
<custom-element></custom-element>
<script>
suite('<custom-element>', function() {
let component = document.querySelector('custom-element');
test('renders div', () => {
assert.isOk(component.shadowRoot.querySelector('div'));
});
});
</script>
</body>
</html>
The issues occured are related to syntax (import/export/et. c.) and I can't find a working way to setup webpack/babel for WCT.
Similar issue here, but can't say it's identical with my question, since I'd like to be able to use absolute imports as well.
Thank y'all in advance.