Escribir pruebas de DOM de navegador con Bun y happy-dom

Puedes escribir y ejecutar pruebas de navegador con el ejecutor de pruebas de Bun junto con Happy DOM. Happy DOM implementa versiones simuladas de APIs de navegador como document y location.

Para comenzar, instala happy-dom.

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

Este módulo exporta un "registrador" que inyecta las APIs de navegador simuladas en el ámbito global.

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

GlobalRegistrator.register();

Necesitamos asegurarnos de que este archivo se ejecute antes de cualquiera de nuestros archivos de prueba. Eso es un trabajo para la funcionalidad preload integrada de Bun. Crea un archivo bunfig.toml en la raíz de tu proyecto (si no existe ya) y agrega las siguientes líneas.

El archivo ./happydom.ts debe contener el código de registro anterior.

toml

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

Ahora, ejecutar bun test dentro de nuestro proyecto ejecutará automáticamente happydom.ts primero. Podemos comenzar a escribir pruebas que usan APIs de navegador.

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

test("establecer texto del botón", () => {
  document.body.innerHTML = `<button>Mi botón</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("Mi botón");
});

Con Happy DOM configurado correctamente, esta prueba se ejecuta como se espera.

bun test

txt


dom.test.ts:
✓ establecer texto del botón [0.82ms]

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

Consulta el repositorio de Happy DOM y Documentación > Ejecutor de pruebas > DOM para documentación completa sobre cómo escribir pruebas de navegador con Bun.