title: How to test custom web component with jest?
body: <p>I would like to test some custom web components and use jest.js as test runner (due to its support for ES6).</p>
  
  <p>Chromium supports commands like</p>
  
  <pre><code>window.customElements.define('my-custom-element', MyCustomElementClass);
  </code></pre>
  
  <p>to register a custom web component. </p>
  
  <p>However, <code>window.customElements</code> does not seem to be known in the context of jest tests.</p>
  
  <p>As a work around I tried to use <strong>jest in combination with puppeteer and express</strong> to run the <code>customElements</code> part in Chromium.</p>
  
  <p>However, I have difficulties to inject the custom element class <code>TreezElement</code> in the evaluated code:</p>
  
  <p>treezElement.js:</p>
  
  <pre><code>class TreezElement extends HTMLElement {
      connectedCallback () {
        this.innerHTML = 'Hello, World!';
      }
  }
  </code></pre>
  
  <p>treezElement.test.js:</p>
  
  <pre><code>import TreezElement from '../../src/components/treezElement.js';
  import puppeteer from 'puppeteer';
  import express from 'express';
  
  describe('Construction', ()=&gt;{
  
      let port = 3000;
  
      let browser;
      let page;
      let element;
      const width = 800;
      const height = 800;
  
      beforeAll(async () =&gt; {
  
          const app = await express()                   
                      .use((req, res) =&gt; {                       
                          res.send(
                          `&lt;!DOCTYPE html&gt;
                          &lt;html&gt;            
                              &lt;body&gt;
                              &lt;div id="root"&gt;&lt;/div&gt;                           
                              &lt;/body&gt;
                          &lt;/html&gt;`
                          )
                      })
                      .listen(port);
  
          browser = await puppeteer.launch({
            headless: false,
            slowMo: 80,
            args: [`--window-size=${width},${height}`]
          });
  
          var pages = await browser.pages();
          page = pages[0]; 
  
          await page.setViewport({ width, height });        
  
          await page.goto('http://localhost:3000'); 
  
          element = await page.evaluate(({TreezElement}) =&gt; {
              console.log('TreezElement:')
              console.log(TreezElement);
              window.customElements.define('treez-element', TreezElement);
              var element = document.create('treez-element');
              document.body.appendChild(element);
              return element;           
           }, {TreezElement}); 
  
      });
  
  
      it('TreezElement', ()=&gt;{   
  
      });    
  
      afterAll(() =&gt; {
          browser.close();
      });        
  
  });
  </code></pre>
  
  <p>Maybe <code>TreezElement</code> is not serializable and therefore <code>undefined</code> is passed to the function. </p>
  
  <p>If I try to import the custom element class <code>TreezElement</code> directly from within the evaluated code ...</p>
  
  <pre><code>element = await page.evaluate(() =&gt; {
              import TreezElement from '../../src/components/treezElement.js';
              console.log('TreezElement:')
              console.log(TreezElement);
              window.customElements.define('treez-element', TreezElement);
              var element = document.create('treez-element');
              document.body.appendChild(element);
              return element;           
           });
  </code></pre>
  
  <p>... I get the error</p>
  
  <blockquote>
    <p>'import' and 'export' may only appear at the top level</p>
  </blockquote>
  
  <p><strong>=> What is the recommended way to test custom web components with jest?</strong></p>
  
  <p>Some related stuff:</p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/53463201/web-component-htmlelement-unit-testing">Web Component / HtmlElement : unit testing</a></p></li>
  <li><p><a href="https://itnext.io/testing-your-javascript-in-a-browser-with-jest-puppeteer-express-and-webpack-c998a37ef887" rel="noreferrer">https://itnext.io/testing-your-javascript-in-a-browser-with-jest-puppeteer-express-and-webpack-c998a37ef887</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/57379078/how-to-mock-dependencies-for-es6-unit-tests">How to mock dependencies for ES6 unit tests?</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/51625029/cant-get-test-coverage-with-jest-puppeteer">Can&#39;t get test coverage with jest + puppeteer</a></p></li>
  <li><p><a href="https://jestjs.io/docs/en/puppeteer" rel="noreferrer">https://jestjs.io/docs/en/puppeteer</a></p></li>
  </ul>