Вы можете писать и запускать тесты браузера с тестовым раннером Bun совместно с Happy DOM. Happy DOM реализует мок-версии браузерных API, таких как document и location.

---

Для начала установите happy-dom.

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

---

Этот модуль экспортирует "регистратор", который внедряет мок-версии браузерных API в глобальную область видимости.

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

GlobalRegistrator.register();

---

Нам нужно убедиться, что этот файл выполняется перед любыми нашими тестовыми файлами. Это задача для встроенной функции Bun preload. Создайте файл bunfig.toml в корне вашего проекта (если его ещё нет) и добавьте следующие строки.

Файл ./happydom.ts должен содержать код регистрации выше.

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

---

Теперь запуск bun test внутри нашего проекта автоматически выполнит сначала happydom.ts. Мы можем начать писать тесты, использующие браузерные API.

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

test("установить текст кнопки", () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("My button");
});

---

При правильной настройке Happy DOM этот тест выполняется как ожидалось.

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]

---

Обратитесь к репозиторию Happy DOM и Документация > Тестирование > DOM для полной документации о написании тестов браузера с Bun.