Utiliser Testing Library avec Bun

Vous pouvez utiliser Testing Library avec le runner de tests de Bun.

Pour utiliser Testing Library, vous devrez d'abord installer Happy Dom. (consultez le guide Happy DOM de Bun pour plus d'informations).

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

Ensuite, vous devriez installer les packages Testing Library que vous prévoyez d'utiliser. Par exemple, si vous configurez des tests pour React, vos installations pourraient ressembler à ceci. Vous devrez également installer @testing-library/jest-dom pour faire fonctionner les matchers.

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

Ensuite, vous devrez créer un script de préchargement pour Happy DOM et pour Testing Library. Pour plus de détails sur le script de configuration Happy DOM, consultez le guide Happy DOM de Bun.

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

GlobalRegistrator.register();

Pour Testing Library, vous voudrez étendre la fonction expect de Bun avec les matchers de Testing Library. En option, pour mieux correspondre au comportement des runners de tests comme Jest, vous pouvez vouloir exécuter un nettoyage après chaque test.

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

expect.extend(matchers);

// Optionnel : nettoie `render` après chaque test
afterEach(() => {
  cleanup();
});

Ensuite, ajoutez ces scripts de préchargement à votre bunfig.toml (vous pouvez aussi tout mettre dans un seul script preload.ts si vous préférez).

toml

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

Si vous utilisez TypeScript, vous devrez également utiliser la fusion de déclarations pour faire apparaître les nouveaux types de matchers dans votre éditeur. Pour ce faire, créez un fichier de déclaration de type qui étend Matchers comme ceci.

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

Vous devriez maintenant pouvoir utiliser Testing Library dans vos tests.

tsx

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

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

Consultez la documentation Testing Library, le dépôt Happy DOM et Docs > Test runner > DOM pour la documentation complète sur l'écriture de tests de navigateur avec Bun.