كتابة اختبارات متصفح DOM مع Bun و happy-dom

يمكنك كتابة وتشغيل اختبارات المتصفح مع مُشغل اختبارات Bun بالاشتراك مع Happy DOM. يُطبق Happy DOM إصدارات وهمية لواجهات برمجة تطبيقات المتصفح مثل document و location.

للبدء، قم بتثبيت happy-dom.

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

تُصدر هذه الوحدة "مسجل" الذي يحقن واجهات برمجة تطبيقات المتصفح الوهمية في النطاق العام.

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

GlobalRegistrator.register();

نحتاج إلى التأكد من تنفيذ هذا الملف قبل أي من ملفات الاختبار الخاصة بنا. هذه وظيفة لوظيفة preload المدمجة في Bun. أنشئ ملف bunfig.toml في جذر مشروعك (إذا لم يكن موجودًا بالفعل) وأضف الأسطر التالية.

يجب أن يحتوي ملف ./happydom.ts على كود التسجيل أعلاه.

toml

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

الآن تشغيل bun test داخل مشروعنا سينفذ تلقائيًا happydom.ts أولاً. يمكننا البدء في كتابة الاختبارات التي تستخدم واجهات برمجة تطبيقات المتصفح.

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

test("تعيين نص الزر", () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector("button");
  expect(button?.innerText).toEqual("My button");
});

مع تكوين Happy DOM بشكل صحيح، يعمل هذا الاختبار كما هو متوقع.

bun test

txt


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 و الوثائق > مُشغل الاختبارات > DOM للحصول على الوثائق الكاملة لكتابة اختبارات المتصفح مع Bun.