时间戳

首页 > 解决方案 > 如何测试包含其他模块的自定义元素？

javascript - 如何测试包含其他模块的自定义元素？

问题描述

有没有办法测试包含外部模块（比如说npm一个）或另一个自定义元素的自定义元素（使用 WCT）？

例如，我正在尝试测试一个自定义元素，如下所示：

// ~/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>

发生的问题与语法（导入/导出/等）有关，我找不到为 WCT 设置 webpack/babel 的有效方法。

类似的问题在这里，但不能说它与我的问题相同，因为我也希望能够使用绝对导入。

提前谢谢大家。

标签： javascriptunit-testingweb-componentcustom-elementweb-component-tester

解决方案

推荐阅读