使用 shadow dom 单元测试本机自定义元素 v1 Web 组件答案

【问题标题】：unit testing native custom elements v1 web component with shadow dom使用 shadow dom 单元测试本机自定义元素 v1 Web 组件
【发布时间】：2018-09-04 01:35:55
【问题描述】：

我按照here 指南，使用纯 JS/HTML/CSS 创建了一个原生自定义元素作为 Web 组件。

现在我想知道如何为这样的组件编写单元测试。有一个优秀的库 Web 组件测试器，但我相信它仅适用于使用聚合物创建的组件。

由于我的组件不是聚合物网络组件，而是原生组件，有人可以为我指出正确的单元测试方向吗？

【问题讨论】：

您应该能够将 WCT 与非聚合物组件一起使用。
我用过 WCT，只用过 Karma。两者都工作得很好。请注意，{mode:'closed'} 会使测试变得困难。
例如导入 npm 模块的自定义元素呢？ WCT 是一种选择吗？

标签： javascript web-component custom-element web-component-tester native-web-component

【解决方案1】：

您可以将 Polymer 的 web-component-tester 用于普通组件。这篇博文有一些例子：https://bendyworks.com/blog/native-web-components。

你可以像这样测试你的组件：

  <my-vanilla-component></my-vanilla-component>
  <script>
    suite('<my-vanilla-component>', function() {
      let component = document.querySelector('my-vanilla-component');
      test('renders div', () => {
        assert.isOk(component.shadowRoot.querySelector('div'));
      });
    });
  </script>

【讨论】：