title: Front End Unit Tests in Deno Break when DOM is involved. TS2304 [ERROR]: Cannot find name 'HTMLElement'
body: <p>I'm new to Typescript and Deno (mostly code in JS and Python) and I'm playing with writing front end typecscipt with Deno. I'm trying to use a compositional style I saw in this <a href="https://hashnode.com/post/rusty-composition-in-typescript-cjo8g6y6b004hlxs1sabgzuzd" rel="nofollow noreferrer">artlicle</a>. One of my interfaces has an HTMLElement type in it like this:</p>
  <pre><code>export default interface HasElement {
    readonly element: HTMLElement;
  }
  </code></pre>
  <p>The classes that implement this interface compile, and I can run resulting code in my browser, but if I attempt to run any unit tests using <code>deno test</code> I get an error <code>error: TS2304 [ERROR]: Cannot find name 'HTMLElement'</code></p>
  <p>I've heard that the DOM is not completely implemented in Deno so I guess I'll probably need to rely on mocking or dependency injection to test any code that makes use of this interface.</p>
  <p>I know that most testing involving the DOM should be done with end-to-end testing with something like Selenium, but it almost seems inevitable that some of my front end unit tests are going to run the problem of HTMLElements not existing within Deno.</p>
  <p>Does anyone have any experience with this issue? What kind of solution should I look into?</p>
  <p>EDIT: Here's my tsconfig.json.</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;lib&quot;: [ &quot;dom&quot;, &quot;deno.ns&quot; ]
      }
  }
  </code></pre>
  <p>Here's the tests that are failing:
  (I found this deno-dom-wasm library, but I'm not sure if its applicable to what I'm trying to do.)</p>
  <pre><code>import {
    DOMParser,
    Element,
  } from &quot;https://deno.land/x/deno_dom/deno-dom-wasm.ts&quot;;
  
  import FakeBase from &quot;./components/FakeBase/FakeBase.ts&quot;;
  import LoginOrganism from &quot;./organisms/LoginOrganism/LoginOrganism.ts&quot;;
  import App from &quot;./App.ts&quot;;
  
  Deno.test({
    name: &quot;test App attaches to app div&quot;,
    fn: async () =&gt; {
      const html = await Deno.readTextFile(&quot;./src/index.html&quot;);
      const doc = new DOMParser().parseFromString(
        html,
        &quot;text/html&quot;,
      )!;
      const appDiv = doc.getElementById(&quot;App&quot;) as Element;
      const fakeBase = new FakeBase(appDiv);
  
      const app = new App(fakeBase);
      const appElement = app.base.element;
  
      assertEquals(appDiv, appElement);
    },
  });
  
  Deno.test({
    name: &quot;test Apps first child is LoginOrganism&quot;,
    fn: async () =&gt; {
      const html = await Deno.readTextFile(&quot;./src/index.html&quot;);
      const doc = new DOMParser().parseFromString(
        html,
        &quot;text/html&quot;,
      )!;
      const appDiv = doc.getElementById(&quot;App&quot;) as Element;
      const fakeBase = new FakeBase(appDiv);
  
      const app = new App(fakeBase);
  
      const first_child = app.children[0] as LoginOrganism;
  
      assert(
        first_child instanceof LoginOrganism,
        `FIRST CHILD IS ${typeof first_child}`,
      );
    },
  });
  
  </code></pre>