title: How to mock a shadow element in jest testing
body: <p>I have a react component <code>ReactComponentContainer</code>, which gets config and <code>shadowRoot</code>.</p>
  
  <pre><code>import React from 'react';
  import App from './App';
  import ReactComponent from './ReactComponent';
  
  const ReactComponentContainer = function({config, shadowRoot}) {
  
    configme(shadowRoot.host || shadowRoot);
  
    return (
      &lt;App renderRoot={shadowRoot}&gt;
        &lt;ReactComponent/&gt;
      &lt;/App&gt;
    );
  };
  
  export default ReactComponentContainer;
  </code></pre>
  
  <p>In my <code>jest</code> test file, I need to mock a shadow dom, so I can pass to ReactComponentContainer as a parameter.</p>
  
  <pre><code>const header = document.createElement('header');
  const shadowRoot = header.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = '&lt;h1&gt;Hello Shadow DOM&lt;/h1&gt;';
  </code></pre>
  
  <pre><code>import React from 'react';
  import ReactComponentContainer from './ReactComponentContainer';
  
  describe('ReactComponentContainer', () =&gt; {
    beforeEach(() =&gt; {
      setUp = (props) =&gt; {
        return mount(&lt;ReactComponentContainer {...props} /&gt;);
      };
    });
  
    it('initailize ReactComponentContainer', () =&gt; {
  
      // mock a shadow dom
      const header = document.createElement('header');
      // Error: attachShadow is undefined
      const shadowRoot = header.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = '&lt;h1&gt;Hello Shadow DOM&lt;/h1&gt;';
  
      const props = {
        config: {},
        renderRoot: shadowRoot
      };
  
      const element = setUp(props);
    });
  });
  </code></pre>
  
  <p>I am getting <code>Error: attachShadow is undefined</code>. I think because it is browser only.</p>
  
  <p>My question:</p>
  
  <p>How do I mock a shadow dom, so I can run it in jest testing?</p>