title: How to perform unit tests for custom elements in Jest using JSDom
body: <p>I realise that this question has been asked on a <a href="https://stackoverflow.com/questions/47800461/how-can-i-unit-test-a-custom-element">number of occasions</a>, though the environment has changed since those questions where asked: notably, <a href="https://github.com/jsdom/jsdom/releases/tag/16.2.0" rel="noreferrer">JSDom now supports custom elements</a>.</p>
  
  <p>These other questions revolved around seeking alternatives (such as using <a href="https://stackoverflow.com/questions/57478484/how-to-test-custom-web-component-with-jest">Happy Dom</a>) as JSDom did not support custom elements at that time. However, now that JSDom does support custom elements, does anyone have any information that can solve the following error?</p>
  
  <blockquote>
    <pre class="lang-none prettyprint-override"><code>TypeError: Class constructor HTMLElement cannot be invoked without 'new'
  
    1 | export default class Foo extends HTMLElement {
    2 |   constructor() {
  &gt; 3 |     super();
      |     ^
    4 | 
    5 |     this._clicker = 2;
    6 |   }
  
  at new Foo (__tests__/fooclass.js:3:5)     
  at Object.&lt;anonymous&gt; (__tests__/fooclass.test.js:7:13)
  </code></pre>
  </blockquote>
  
  <h2>Current setup:</h2>
  
  <p>A reference repo is available <a href="https://github.com/awdltd/jest-custom-elements-error" rel="noreferrer">here</a> (now fixed):</p>
  
  <h3>Custom element example</h3>
  
  <pre class="lang-js prettyprint-override"><code>class Foo extends HTMLElement {
    constructor() {
      super();
  
      this._clicker = 2;
    }
  
    connectedCallback() {
      this.textContent = 'My Foo Bar Element';
    }
  
    get testCallback() {
      return 'hello world!';
    }
  
    set clicker(num) {
      this._clicker = Number(num);
    }
  
    get clicker() {
      return this._clicker;
    }
  }
  
  </code></pre>
  
  <h3>packages.json</h3>
  
  <pre class="lang-json prettyprint-override"><code>{
    "scripts": {
      "test": "jest --env=jest-environment-jsdom-sixteen"
    },
    "jest": {
      "verbose": true
    },
    "devDependencies": {
      "@babel/preset-env": "^7.8.4",
      "babel-plugin-transform-builtin-classes": "^0.6.1",
      "jest": "^25.1.0",
      "jest-environment-jsdom-sixteen": "^1.0.2"
    }
  }
  </code></pre>
  
  <h3>.babelrc</h3>
  
  <pre class="lang-json prettyprint-override"><code>{
    "presets": ["@babel/preset-env"]
  }
  </code></pre>