您可以使用 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 內建 預載 功能的工作。
在專案根目錄中建立一個 bunfig.toml
檔案(如果尚未存在),並新增下列幾行。
./happydom.ts
檔案應包含上述註冊程式碼。[test]
preload = "./happydom.ts"
bunfig.toml
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");
});
現在在專案中執行 bun test
會自動先執行 happydom.ts
。我們可以開始撰寫使用瀏覽器 API 的測試。
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 後,此測試會如預期執行。