Есть ли способ протестировать пользовательский элемент (используя WCT), который включает в себя внешний модуль (например, npm один) или другой пользовательский элемент?
Например, я пытаюсь протестировать пользовательский элемент, который выглядит следующим образом:
// ~/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>
Возникли проблемы, связанные с синтаксисом (импорт / экспорт / и т. Д.), И я не могу найти рабочий способ настройки webpack / babel для WCT.
Подобная проблема здесь , но не могу сказать, что она совпадает с моим вопросом, поскольку я хотел бы также использовать абсолютный импорт.
Спасибо всем заранее.