Écrire des tests DOM de navigateur avec Bun et happy-dom

Vous pouvez écrire et exécuter des tests de navigateur avec le runner de tests de Bun en conjonction avec Happy DOM. Happy DOM implémente des versions simulées des API de navigateur comme document et location.

Pour commencer, installez happy-dom.

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

Ce module exporte un "registrator" qui injecte les API de navigateur simulées dans la portée globale.

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

GlobalRegistrator.register();

Nous devons nous assurer que ce fichier est exécuté avant tous nos fichiers de test. C'est le rôle de la fonctionnalité preload intégrée de Bun. Créez un fichier bunfig.toml à la racine de votre projet (s'il n'existe pas déjà) et ajoutez les lignes suivantes.

Le fichier ./happydom.ts doit contenir le code d'enregistrement ci-dessus.

toml

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

Maintenant, l'exécution de bun test dans notre projet exécutera automatiquement happydom.ts en premier. Nous pouvons commencer à écrire des tests qui utilisent les API de navigateur.

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

test("définir le texte du bouton", () => {
  document.body.innerHTML = `<button>Mon bouton</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("Mon bouton");
});

Avec Happy DOM correctement configuré, ce test s'exécute comme prévu.

bun test

txt


dom.test.ts:
✓ définir le texte du bouton [0.82ms]

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

Consultez le repo Happy DOM et Docs > Test runner > DOM pour la documentation complète sur l'écriture de tests de navigateur avec Bun.