Using Testing Library with Bun | Bun 한국어

You can use Testing Library with Bun's test runner.

First, install Happy DOM (see Bun's Happy DOM guide).

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

Next, install the Testing Library packages you plan to use, plus @testing-library/jest-dom for the matchers used later. For React:

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

Next, create preload scripts for Happy DOM and for Testing Library.

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

GlobalRegistrator.register();

For Testing Library, extend Bun's expect function with Testing Library's matchers. Optionally, run cleanup after each test to better match the behavior of test runners like 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);

// Optional: cleans up `render` after each test
afterEach(() => {
  cleanup();
});

Next, add these preload scripts to your bunfig.toml. If you combine them into a single preload script, load the @testing-library/* packages with await import() after GlobalRegistrator.register(). Bun evaluates a static import before register() runs, and screen queries then throw.

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

If you use TypeScript, you also need declaration merging so the new matcher types show up in your editor. Create a type declaration file that extends 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, void> {}
  interface AsymmetricMatchers extends TestingLibraryMatchers<any, any> {}
}

Now you can use Testing Library in your tests.

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

See the Testing Library docs, the Happy DOM repo, and DOM testing.