Bun

指南測試執行器

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

您可以結合使用 Bun 的測試執行器和 Happy DOM 來編寫和執行瀏覽器測試。Happy DOM 實現了瀏覽器 API 的模擬版本,例如 documentlocation

要開始,請安裝 happy-dom

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

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

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

GlobalRegistrator.register();

我們需要確保此檔案在任何測試檔案之前執行。這是 Bun 內建的 預載入 功能的作用。在專案根目錄建立一個 bunfig.toml 檔案(如果尚不存在),並新增以下行。

./happydom.ts 檔案應包含上述註冊程式碼。

bunfig.toml
[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