使用 Bun 和 happy-dom 編寫瀏覽器 DOM 測試

使用 Happy DOM 和 Bun 的測試執行器編寫瀏覽器測試。Happy DOM 實現了 document 和 location 等瀏覽器 API 的模擬版本。

安裝 @happy-dom/global-registrator。

terminal

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

此模組匯出了一個“註冊器”，可將模擬的瀏覽器 API 注入全域性作用域。

happydom.ts

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

GlobalRegistrator.register();

此檔案需要在任何測試檔案之前執行。這是 Bun 內建的 preload 選項的任務。在專案根目錄中建立一個 bunfig.toml 檔案（如果尚不存在），並新增以下內容。

./happydom.ts 檔案應包含上一步中的註冊程式碼。

bunfig.toml

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

現在，bun test 會在測試檔案之前執行 happydom.ts，因此你可以編寫使用瀏覽器 API 的測試。

dom.test.ts

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 後，測試即可通過。

terminal

bun test

Text


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

 1 pass
 0 fail
 1 expect() calls
Ran 1 test across 1 file. [125.00ms]

請參閱 Happy DOM 程式碼儲存庫和 DOM 測試。