Você pode escrever e executar testes de navegador com o runner de testes do Bun em conjunto com Happy DOM. Happy DOM implementa versões mockadas de APIs do navegador como document e location.

---

Para começar, instale happy-dom.

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

---

Este módulo exporta um "registrador" que injeta as APIs mockadas do navegador no escopo global.

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

GlobalRegistrator.register();

---

Precisamos garantir que este arquivo seja executado antes de qualquer um dos nossos arquivos de teste. Isso é uma tarefa para a funcionalidade preload integrada do Bun. Crie um arquivo bunfig.toml na raiz do seu projeto (se ainda não existir) e adicione as seguintes linhas.

O arquivo ./happydom.ts deve conter o código de registro acima.

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

---

Agora, executar bun test dentro do nosso projeto automaticamente executará happydom.ts primeiro. Podemos começar a escrever testes que usam APIs do navegador.

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

test("definir texto do botão", () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("My button");
});

---

Com Happy DOM configurado corretamente, este teste é executado conforme esperado.

bun test

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

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

---

Consulte o repositório Happy DOM e Docs > Test runner > DOM para documentação completa sobre como escrever testes de navegador com Bun.