Bun 의 테스트 러너와 함께 Testing Library 를 사용할 수 있습니다.

---

Testing Library 를 사용하기 위한 사전 요구 사항으로 Happy Dom 을 설치해야 합니다. (자세한 내용은 Bun 의 Happy DOM 가이드 를 참조하세요.)

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

---

다음으로 사용하려는 Testing Library 패키지를 설치하세요. 예를 들어 React 에 대한 테스트를 설정하는 경우 다음과 같이 설치할 수 있습니다. 나중에 매처가 작동하도록 하려면 @testing-library/jest-dom 도 설치해야 합니다.

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

---

다음으로 Happy DOM 과 Testing Library 에 대한 preload 스크립트를 생성해야 합니다. Happy DOM 설정 스크립트에 대한 자세한 내용은 Bun 의 Happy DOM 가이드 를 참조하세요.

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

GlobalRegistrator.register();

---

Testing Library 의 경우 Testing Library 의 매처로 Bun 의 expect 함수를 확장해야 합니다. 선택적으로 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);

// 선택 사항: 각 테스트 후에 `render` 정리
afterEach(() => {
  cleanup();
});

---

다음으로 이 preload 스크립트를 bunfig.toml 에 추가하세요 (원하는 경우 모든 것을 단일 preload.ts 스크립트에 포함할 수도 있습니다).

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

---

TypeScript 를 사용하는 경우 선언 병합을 사용하여 새 매처 타입이 편집기에 표시되도록 해야 합니다. 이를 위해 다음과 같이 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, T> {}
  interface AsymmetricMatchers extends TestingLibraryMatchers {}
}

---

이제 테스트에서 Testing Library 를 사용할 수 있어야 합니다.

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

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

---

Bun 으로 브라우저 테스트 작성에 대한 전체 문서는 Testing Library 문서, Happy DOM 저장소 및 문서 > 테스트 러너 > DOM 을 참조하세요.