Usar Testing Library com Bun

Você pode usar Testing Library com o runner de testes do Bun.

Como pré-requisito para usar Testing Library, você precisará instalar Happy Dom. (veja o guia Happy DOM do Bun para mais informações).

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

Em seguida, você deve instalar os pacotes Testing Library que planeja usar. Por exemplo, se estiver configurando testes para React, suas instalações podem ser assim. Você também precisará instalar @testing-library/jest-dom para fazer os matchers funcionarem depois.

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

Depois, você precisará criar um script de preload para Happy DOM e Testing Library. Para mais detalhes sobre o script de configuração do Happy DOM, veja guia Happy DOM do Bun.

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

GlobalRegistrator.register();

Para Testing Library, você vai querer estender a função expect do Bun com os matchers do Testing Library. Opcionalmente, para corresponder melhor ao comportamento de runners de teste como Jest, você pode querer executar cleanup após cada teste.

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: limpa `render` após cada teste
afterEach(() => {
  cleanup();
});

Depois, adicione estes scripts de preload ao seu bunfig.toml (você também pode ter tudo em um único script preload.ts se preferir).

toml

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

Se você estiver usando TypeScript, também precisará usar declaração de fusão para fazer os novos tipos de matcher aparecerem em seu editor. Para fazer isso, crie um arquivo de declaração de tipo que estenda Matchers assim.

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

Agora você deve poder usar Testing Library em seus testes

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();
});

Consulte a documentação Testing Library, repositório Happy DOM e Docs > Test runner > DOM para documentação completa sobre escrever testes de navegador com Bun.