Puoi scrivere ed eseguire test del browser con il test runner di Bun insieme a Happy DOM. Happy DOM implementa versioni simulate di API del browser come document e location.

---

Per iniziare, installa happy-dom.

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

---

Questo modulo esporta un "registrator" che inietta le API simulate del browser nell'ambito globale.

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

GlobalRegistrator.register();

---

Dobbiamo assicurarci che questo file venga eseguito prima di qualsiasi file di test. Questo è un compito per la funzionalità preload integrata di Bun. Crea un file bunfig.toml nella radice del tuo progetto (se non esiste già) e aggiungi le seguenti righe.

Il file ./happydom.ts dovrebbe contenere il codice di registrazione sopra.

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

---

Ora l'esecuzione di bun test all'interno del nostro progetto eseguirà automaticamente happydom.ts per primo. Possiamo iniziare a scrivere test che usano le API del browser.

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

test("imposta testo del pulsante", () => {
  document.body.innerHTML = `<button>Il mio pulsante</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("Il mio pulsante");
});

---

Con Happy DOM configurato correttamente, questo test viene eseguito come previsto.

bun test

dom.test.ts:
✓ imposta testo del pulsante [0.82ms]

 1 pass
 0 fail
 1 expect() calls
Ran 1 tests across 1 files. 1 total [125.00ms]

---

Fai riferimento al repo Happy DOM e Docs > Test runner > DOM per la documentazione completa sulla scrittura di test del browser con Bun.