你可以将 Testing Library 与 Bun 的测试运行器一起使用。
作为使用 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 创建一个预加载脚本。有关 Happy DOM 设置脚本的更多详细信息，请参阅 Bun 的 Happy DOM 指南。
happydom.ts
import { GlobalRegistrator } from '@happy-dom/global-registrator';
GlobalRegistrator.register();
对于 Testing Library，你将希望使用 Testing Library 的匹配器扩展 Bun 的 expect 函数。 可选地，为了更好地匹配像 Jest 这样的测试运行器的行为，你可能希望在每次测试后运行清理。
testing-library.ts
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();
});
接下来，将这些预加载脚本添加到你的 bunfig.toml 中（如果你愿意，你也可以将所有内容放在一个 preload.ts 脚本中）。
bunfig.toml
[test]
preload = ["./happydom.ts", "./testing-library.ts"]
如果你正在使用 TypeScript，你还需要使用声明合并，以便在你的编辑器中显示新的匹配器类型。为此，创建一个扩展 Matchers 的类型声明文件，如下所示。
matchers.d.ts
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('Can use Testing Library', () => {
render(MyComponent);
const myComponent = screen.getByTestId('my-component');
expect(myComponent).toBeInTheDocument();
})
请参阅 Testing Library 文档、Happy DOM repo 以及 文档 > 测试运行器 > DOM，以获取关于使用 Bun 编写浏览器测试的完整文档。
