Usar Testing Library con Bun

Puedes usar Testing Library con el ejecutor de pruebas de Bun.

Como requisito previo para usar Testing Library, necesitarás instalar Happy Dom. (consulta la guía de Happy DOM de Bun para más información).

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

Luego, debes instalar los paquetes de Testing Library que planeas usar. Por ejemplo, si estás configurando pruebas para React, tus instalaciones pueden verse así. También necesitarás instalar @testing-library/jest-dom para que los matchers funcionen más tarde.

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

Luego, necesitarás crear un script de precarga para Happy DOM y Testing Library. Para más detalles sobre el script de configuración de Happy DOM, consulta la guía de Happy DOM de Bun.

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

GlobalRegistrator.register();

Para Testing Library, querrás extender la función expect de Bun con los matchers de Testing Library. Opcionalmente, para coincidir mejor con el comportamiento de ejecutores de pruebas como Jest, puedes querer ejecutar cleanup después de cada prueba.

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

expect.extend(matchers);

// Opcional: limpia `render` después de cada prueba
afterEach(() => {
  cleanup();
});

Luego, agrega estos scripts de precarga a tu bunfig.toml (también puedes tener todo en un solo script preload.ts si lo prefieres).

toml

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

Si estás usando TypeScript, también necesitarás usar la fusión de declaraciones para que los nuevos tipos de matchers aparezcan en tu editor. Para hacer esto, crea un archivo de declaración de tipos que extienda Matchers así.

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

Ahora deberías poder usar Testing Library en tus pruebas

tsx

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

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

Consulta la documentación de Testing Library, el repositorio de Happy DOM y Documentación > Ejecutor de pruebas > DOM para documentación completa sobre cómo escribir pruebas de navegador con Bun.