94 lines
2.9 KiB
Plaintext
94 lines
2.9 KiB
Plaintext
---
|
|
title: Using Testing Library with Bun
|
|
sidebarTitle: Testing Library
|
|
mode: center
|
|
---
|
|
|
|
You can use [Testing Library](https://testing-library.com/) with Bun's test runner.
|
|
|
|
---
|
|
|
|
First, install [Happy DOM](https://github.com/capricorn86/happy-dom) (see [Bun's Happy DOM guide](/guides/test/happy-dom)).
|
|
|
|
```sh terminal icon="terminal"
|
|
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:
|
|
|
|
```sh terminal icon="terminal"
|
|
bun add -D @testing-library/react @testing-library/dom @testing-library/jest-dom
|
|
```
|
|
|
|
---
|
|
|
|
Next, create preload scripts for Happy DOM and for Testing Library.
|
|
|
|
```ts happydom.ts icon="/icons/typescript.svg"
|
|
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.
|
|
|
|
```ts testing-library.ts icon="/icons/typescript.svg"
|
|
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.
|
|
|
|
```toml bunfig.toml icon="settings"
|
|
[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`.
|
|
|
|
```ts matchers.d.ts icon="/icons/typescript.svg"
|
|
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.
|
|
|
|
```tsx myComponent.test.tsx icon="/icons/typescript.svg"
|
|
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](https://testing-library.com/), the [Happy DOM repo](https://github.com/capricorn86/happy-dom), and [DOM testing](/test/dom).
|