单元测试带有阴影的原生自定义元素 v1 Web 组件 dom

Question

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

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

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

Answer 1

您可以使用 Polymer 的 web-component-tester for vanilla components. This blog post has some examples: 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>

单元测试带有阴影的原生自定义元素 v1 Web 组件 dom

unit testing native custom elements v1 web component with shadow dom

javascript

web-component

custom-element

web-component-tester

native-web-component