title: Svelte Jest test case making document.getElementId as null
body: <p>I am trying to write the unit test case for my svelte component using jest-transform-svelte library. Following is the component:</p>
  
  <p>XYZ.svelte</p>
  
  <pre><code>&lt;script&gt;
    function submit() {
      var name = document.getElementById("name").value; // Here document.getElementById("name") is coming as null when run from unit test case.
      dispatch("abc", {
        text: name
      });
    }
  &lt;/script&gt;
  &lt;input id="name" value="" type="text" label="Name" /&gt;
  &lt;button label="Submit" variant="primary" on:click={submit} /&gt;
  </code></pre>
  
  <p>XYZ.test.js</p>
  
  <pre><code>import XYZ from "XYZ.svelte";
  
  describe("XYZ Component", () =&gt; {
    it('dispatches abc event on submit', (next) =&gt; {
  
      const target = document.createElement('div');
      const xyz = new XYZ({ target: target });
  
      setTimeout(() =&gt; {
        const button = target.querySelector("button");
        button.click();
  
        xyz.$on('abc', event =&gt; {
          next();
        });
      }, 10);
    });
  });
  </code></pre>
  
  <p>When button.click on the test case happens, the call is triggering the submit function in XYZ.svelte but, </p>
  
  <blockquote>
    <p>document.getElementById("name")</p>
  </blockquote>
  
  <p>is coming as null because of which getting null pointer exception error. </p>
  
  <p>Any idea what I am doing wrong?</p>