unit testing native custom elements v1 web component with shadow dom

Question

I have created a native custom element as web component with pure JS/HTML/CSS following the guide here.

Now I am wondering how can I write unit tests for such a component. There is an excellent library web component tester but I believe it is only meant for the components created with polymer.

As my component is not a polymer web component, rather a native one, can somebody please point me to the right direction for unit testing.

Answer 1

You can use Polymer's web-component-tester for vanilla components. This blog post has some examples: https://bendyworks.com/blog/native-web-components.

You can test your component something like this:

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