> ## Documentation Index
> Fetch the complete documentation index at: https://bun.ll1025.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 在 Bun 中使用 Testing Library

你可以在 Bun 的测试运行器中使用 [Testing Library](https://testing-library.com/)。

***

首先，安装 [Happy DOM](https://github.com/capricorn86/happy-dom)（参见 [Bun 的 Happy DOM 指南](/guides/test/happy-dom)）。

```sh terminal icon="terminal" theme={null}
bun add -D @happy-dom/global-registrator
```

***

接下来，安装你计划使用的 Testing Library 包，以及稍后使用的匹配器所需的 `@testing-library/jest-dom`。对于 React：

```sh terminal icon="terminal" theme={null}
bun add -D @testing-library/react @testing-library/dom @testing-library/jest-dom
```

***

接下来，为 Happy DOM 和 Testing Library 创建预加载脚本。

```ts happydom.ts icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
import { GlobalRegistrator } from "@happy-dom/global-registrator";

GlobalRegistrator.register();
```

***

对于 Testing Library，使用 Testing Library 的匹配器扩展 Bun 的 `expect` 函数。可选择在每个测试后运行清理，以更好地匹配 Jest 等测试运行器的行为。

```ts testing-library.ts icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
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();
});
```

***

接下来，将这些预加载脚本添加到你的 `bunfig.toml`。你也可以把所有内容放在一个 `preload.ts` 脚本中。

```toml bunfig.toml icon="settings" theme={null}
[test]
preload = ["./happydom.ts", "./testing-library.ts"]
```

***

如果你使用 TypeScript，还需要声明合并，以便新的匹配器类型在你的编辑器中显示。创建一个类型声明文件来扩展 `Matchers`。

```ts matchers.d.ts icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
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 了。

```tsx myComponent.test.tsx icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
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();
});
```

***

参见 [Testing Library 文档](https://testing-library.com/)、[Happy DOM 仓库](https://github.com/capricorn86/happy-dom) 和 [DOM 测试](/test/dom)。