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.

I have used WCT and just Karma. Both work just fine. Be aware that `{mode:'closed'}` makes for difficult testing. — Intervalia, Sep 05 '18 at 14:44
What about custom elements which imports npm modules for instance? Is WCT an option? — Lucaci Sergiu, Mar 27 '19 at 10:19

score 6 · Accepted Answer · edited Jan 30 '20 at 15:13

6

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>

edited Jan 30 '20 at 15:13

MauroPorras

5,079
5
30
41

answered Sep 05 '18 at 14:20

Pearl Latteier

88
7

How does this work under the hood? How does it see the rendered form of the page, when (for example) shadowRoot only shows the shadow DOM before slots have been filled? – Michael Jun 07 '22 at 21:55

unit testing native custom elements v1 web component with shadow dom

1 Answers1