Browser-DOM-Tests mit Bun und happy-dom schreiben

Sie können Browser-Tests mit Buns Testrunner zusammen mit Happy DOM schreiben und ausführen. Happy DOM implementiert gemockte Versionen von Browser-APIs wie document und location.

Um zu beginnen, installieren Sie happy-dom.

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

Dieses Modul exportiert einen "Registrator", der die gemockten Browser-APIs in den globalen Geltungsbereich injiziert.

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

GlobalRegistrator.register();

Wir müssen sicherstellen, dass diese Datei vor allen unseren Testdateien ausgeführt wird. Das ist eine Aufgabe für Buns integrierte preload Funktionalität. Erstellen Sie eine bunfig.toml-Datei im Stammverzeichnis Ihres Projekts (falls sie noch nicht existiert) und fügen Sie die folgenden Zeilen hinzu.

Die ./happydom.ts-Datei sollte den obigen Registrierungscode enthalten.

toml

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

Wenn Sie jetzt bun test in Ihrem Projekt ausführen, wird automatisch zuerst happydom.ts ausgeführt. Wir können Tests schreiben, die Browser-APIs verwenden.

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

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

Wenn Happy DOM richtig konfiguriert ist, läuft dieser Test wie erwartet.

bun test

txt


dom.test.ts:
✓ Button-Text setzen [0.82ms]

 1 bestanden
 0 fehlgeschlagen
 1 expect()-Aufrufe
1 Test in 1 Datei ausgeführt. 1 insgesamt [125.00ms]

Siehe Happy DOM Repo und Docs > Test runner > DOM für die vollständige Dokumentation zum Schreiben von Browser-Tests mit Bun.