Testing Library mit Bun verwenden

Sie können Testing Library mit Buns Testrunner verwenden.

Als Voraussetzung für die Verwendung von Testing Library müssen Sie Happy Dom installieren. (siehe Buns Happy DOM-Anleitung für weitere Informationen).

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

Als Nächstes sollten Sie die Testing Library-Pakete installieren, die Sie verwenden möchten. Wenn Sie beispielsweise Testing für React einrichten, sehen Ihre Installationen möglicherweise so aus. Sie müssen auch @testing-library/jest-dom installieren, damit die Matcher später funktionieren.

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

Als Nächstes müssen Sie ein Preload-Skript für Happy DOM und Testing Library erstellen. Für weitere Details zum Happy DOM-Setup-Skript siehe Buns Happy DOM-Anleitung.

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

GlobalRegistrator.register();

Für Testing Library sollten Sie Buns expect-Funktion mit Testing Librarys Matchern erweitern. Optional können Sie, um das Verhalten von Test-Runnern wie Jest besser nachzubilden, die Bereinigung nach jedem Test ausführen.

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

expect.extend(matchers);

// Optional: bereinigt `render` nach jedem Test
afterEach(() => {
  cleanup();
});

Fügen Sie als Nächstes diese Preload-Skripte zu Ihrer bunfig.toml hinzu (Sie können auch alles in einem einzigen preload.ts-Skript haben, wenn Sie es vorziehen).

toml

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

Wenn Sie TypeScript verwenden, müssen Sie auch Declaration Merging verwenden, damit die neuen Matcher-Typen in Ihrem Editor angezeigt werden. Erstellen Sie dazu eine Typ-Deklarationsdatei, die Matchers wie folgt erweitert.

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 {}
}

Sie sollten jetzt Testing Library in Ihren Tests verwenden können.

tsx

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

test("Kann Testing Library verwenden", () => {
  render(MyComponent);
  const myComponent = screen.getByTestId("my-component");
  expect(myComponent).toBeInTheDocument();
});

Siehe Testing Library-Dokumentation, Happy DOM-Repo und Docs > Test runner > DOM für die vollständige Dokumentation zum Schreiben von Browser-Tests mit Bun.