DOM 測試

Bun 的測試執行器與現有的元件和 DOM 測試函式庫相容，包括 React Testing Library 和 happy-dom。

happy-dom

對於為您的前端程式碼和元件撰寫無頭測試，我們建議使用 happy-dom。Happy DOM 在純粹的 JavaScript 中實作了一組完整的 HTML 和 DOM API，讓模擬瀏覽器環境變得非常精確。

首先，將 @happy-dom/global-registrator 套件安裝為開發依賴項。

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

我們將使用 Bun 的預載功能，在執行我們的測試之前註冊 happy-dom 全域變數。這個步驟將使瀏覽器 API（例如 document）在全域範圍內可用。在專案的根目錄中建立一個名為 happydom.ts 的檔案，並加入以下程式碼

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

GlobalRegistrator.register();

要在 bun test 之前預載這個檔案，請開啟或建立一個 bunfig.toml 檔案，並加入以下幾行。

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

當您執行 bun test 時，這將執行 happydom.ts。現在，您可以撰寫使用瀏覽器 API（例如 document 和 window）的測試。

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

test('dom test', () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector('button');
  expect(button?.innerText).toEqual('My button');
});

根據您的 tsconfig.json 設定，您可能會在上述程式碼中看到 "找不到名稱 'document'" 類型錯誤。若要「注入」document 和其他瀏覽器 API 的類型，請將下列 三斜線指令 新增到任何測試檔案的最上方。

/// <reference lib="dom" />

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

test('dom test', () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector('button');
  expect(button?.innerText).toEqual('My button');
});

讓我們使用 bun test 執行此測試

bun test

bun test v1.x

dom.test.ts:
✓ dom test [0.82ms]

 1 pass
 0 fail
 1 expect() calls
Ran 1 tests across 1 files. 1 total [125.00ms]