Bun 의 테스트 러너와 Happy DOM 을 함께 사용하여 브라우저 테스트를 작성하고 실행할 수 있습니다. Happy DOM 은 document 와 location 과 같은 브라우저 API 의 모의 버전을 구현합니다.

---

시작하려면 happy-dom 을 설치하세요.

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

---

이 모듈은 모의 브라우저 API 를 전역 범위에 주입하는 "registrator" 를 내보냅니다.

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("set button text", () => {
  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]

---

Bun 으로 브라우저 테스트 작성에 대한 전체 문서는 Happy DOM 저장소 와 문서 > 테스트 러너 > DOM 을 참조하세요.