يمكنك استخدام Testing Library مع مُشغل اختبارات Bun.

---

كشرط أساسي لاستخدام Testing Library، ستحتاج إلى تثبيت Happy Dom. (راجع دليل Happy DOM من Bun لمزيد من المعلومات).

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

---

بعد ذلك، يجب تثبيت حزم Testing Library التي تخطط لاستخدامها. على سبيل المثال، إذا كنت تُعد الاختبار لـ React، فستكون التثبيتات كما يلي. ستحتاج أيضًا إلى تثبيت @testing-library/jest-dom لجعل المطابقات تعمل لاحقًا.

bun add -D @testing-library/react @testing-library/dom @testing-library/jest-dom

---

بعد ذلك، ستحتاج إلى إنشاء سكريبت تحميل مسبق لـ Happy DOM و Testing Library. لمزيد من التفاصيل حول سكريبت إعداد Happy DOM، راجع دليل Happy DOM من Bun.

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

GlobalRegistrator.register();

---

بالنسبة لـ Testing Library، سترغب في توسيع دالة expect في Bun مع مطابقات Testing Library. بشكل اختياري، لمطابقة سلوك مُشغلات الاختبار مثل Jest بشكل أفضل، قد ترغب في تشغيل التنظيف بعد كل اختبار.

import { afterEach, expect } from "bun:test";
import { cleanup } from "@testing-library/react";
import * as matchers from "@testing-library/jest-dom/matchers";

expect.extend(matchers);

// اختياري: ينظف `render` بعد كل اختبار
afterEach(() => {
  cleanup();
});

---

بعد ذلك، أضف سكريبتات التحميل المسبق هذه إلى bunfig.toml الخاص بك (يمكنك أيضًا وضع كل شيء في سكريبت preload.ts واحد إذا فضلت ذلك).

[test]
preload = ["./happydom.ts", "./testing-library.ts"]

---

إذا كنت تستخدم TypeScript، فستحتاج أيضًا إلى استخدام دمج التصريحات لجعل أنواع المطابقات الجديدة تظهر في محررك. للقيام بذلك، أنشئ ملف تعريف نوع يوسع Matchers مثل هذا.

import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
import { Matchers, AsymmetricMatchers } from "bun:test";

declare module "bun:test" {
  interface Matchers<T> extends TestingLibraryMatchers<typeof expect.stringContaining, T> {}
  interface AsymmetricMatchers extends TestingLibraryMatchers {}
}

---

يجب أن تكون قادرًا الآن على استخدام Testing Library في اختباراتك

import { test, expect } from "bun:test";
import { screen, render } from "@testing-library/react";
import { MyComponent } from "./myComponent";

test("يمكن استخدام Testing Library", () => {
  render(<MyComponent />);
  const myComponent = screen.getByTestId("my-component");
  expect(myComponent).toBeInTheDocument();
});

---

راجع وثائق Testing Library و مستودع Happy DOM و الوثائق > مُشغل الاختبارات > DOM للحصول على الوثائق الكاملة لكتابة اختبارات المتصفح مع Bun.