Write browser DOM tests with Bun and happy-dom

Use Happy DOM to write browser tests with Bun's test runner. Happy DOM implements mocked versions of browser APIs like document and location.

Install @happy-dom/global-registrator.

$ bun add -d @happy-dom/global-registrator

This module exports a "registrator" that injects the mocked browser APIs into the global scope.

import { GlobalRegistrator } from "@happy-dom/global-registrator";

GlobalRegistrator.register();

This file needs to run before any of your test files. That's a job for Bun's built-in preload option. Create a bunfig.toml file in the root of your project (if it doesn't already exist) and add the following lines.

The ./happydom.ts file should contain the registration code from the previous step.

[test]
preload = "./happydom.ts"

Now bun test executes happydom.ts before your test files, so you can write tests that use browser APIs.

import { test, expect } from "bun:test";

test("set button text", () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("My button");
});

With Happy DOM registered, the test passes.

$ bun test

bun test v1.3.14 (9c68abdb)

dom.test.ts:
✓ set button text [0.82ms]

 1 pass
 0 fail
 1 expect() calls
Ran 1 test across 1 file. [125.00ms]

See the Happy DOM repo and DOM testing.