Testing Preact components in a Deno/Fresh environment

I have been working on a larger project for a while that uses a Deno and Fresh. There are many things that are fantastic and I feel that I'm more productive than I would had I used another fullstack JavaScript framework.

If I were to name a single thing for why I feel that way, it would be because I was able to easily understand how SSR works: everything returned to the client is effectively client code (and JavaScript shipped if they're inside an island), everything else runs on the server.

One thing that hasn't worked too well, though, is testing Preact components. I had issues with JSDOM initially, which is documented already: for example, this GitHub Issue. Thanks to that thread, the snippet below is what I ended up doing in the end:

import { beforeEach, describe, it } from "@std/testing/bdd";
import { render } from "@testing-library/preact";

beforeEach(useJSDOM);

/**
 * Set the document object in tests that require a DOM. Should be used in a
 * top-level `beforeEach`.
 */
export async function useJSDOM() {
    const { JSDOM } = await import("jsdom");
    const jsdom = new JSDOM();
  
    globalThis.window = jsdom.window;
    globalThis.document = jsdom.window.document;
}

Testing Preact components with @testing-library/preact was then fine for a bit, but sadness appeared again when I tried testing a component that has useRef (I got a similar error with useState while debugging) 😰:

error: TypeError: Cannot read properties of undefined (reading '__H')
    at l (https://esm.sh/preact@10.22.0/denonext/hooks.mjs:2:198)
    at T (https://esm.sh/preact@10.22.0/denonext/hooks.mjs:2:1463)
    at L (https://esm.sh/preact@10.22.0/denonext/hooks.mjs:2:1223)
    at A.RefWrapper [as constructor] (file:///Users/honie/Development/preact-testing-utils
-jsdom/islands/Button.test.tsx:26:15)
    at A.ve [as render] (https://esm.sh/preact@10.26.2/denonext/preact.mjs:2:9178)
    at z (https://esm.sh/preact@10.26.2/denonext/preact.mjs:2:6239)
    at oe (https://esm.sh/preact@10.26.2/denonext/preact.mjs:2:1817)
    at z (https://esm.sh/preact@10.26.2/denonext/preact.mjs:2:6544)
    at ye (https://esm.sh/preact@10.26.2/denonext/preact.mjs:2:9342)
    at https://esm.sh/@testing-library/preact@3.2.4/denonext/pure.mjs:2:1148

After poking at it for much longer than I would have liked, making sure that @testing-library/preact comes from the same source as preact and making sure that preact was upgraded to the latest version was what fixed it for me. The relevant parts of deno.json should look like this:

{
  "imports": {
    "jsdom": "npm:jsdom@^26.0.0",
    "@testing-library/preact": "https://esm.sh/@testing-library/preact@^3.2.4",
    "preact": "https://esm.sh/preact@10.26.0",
    "preact/": "https://esm.sh/preact@10.26.0/",
  },
  "nodeModulesDir": "auto"
}

It broke again today and upgrading preact to the latest version 10.26.2 fixed it. It is wroth noting that I'm not sure what the effect of upgrading preact independently of Fresh is, but things seem to be okay and none of my other tests have been broken (so far).

Introducing NPM dependencies and dependency management feel fragile at the moment. The Deno team seems to be working hard on improving things everywhere at an impressive pace though! Hopefully we'll see some improvements in this area in upcoming versions!