74 lines
1.8 KiB
Plaintext
74 lines
1.8 KiB
Plaintext
---
|
|
title: Write browser DOM tests with Bun and happy-dom
|
|
sidebarTitle: DOM tests
|
|
mode: center
|
|
---
|
|
|
|
Use [Happy DOM](https://github.com/capricorn86/happy-dom) to write browser tests with Bun's test runner. Happy DOM implements mocked versions of browser APIs like `document` and `location`.
|
|
|
|
---
|
|
|
|
Install `@happy-dom/global-registrator`.
|
|
|
|
```sh terminal icon="terminal"
|
|
bun add -d @happy-dom/global-registrator
|
|
```
|
|
|
|
---
|
|
|
|
This module exports a "registrator" that injects the mocked browser APIs into the global scope.
|
|
|
|
```ts happydom.ts icon="/icons/typescript.svg"
|
|
import { GlobalRegistrator } from "@happy-dom/global-registrator";
|
|
|
|
GlobalRegistrator.register();
|
|
```
|
|
|
|
---
|
|
|
|
This file needs to run before any of your test files. That's a job for Bun's built-in [_preload_](/runtime/bunfig#test-preload) option. Create a `bunfig.toml` file in the root of your project (if it doesn't already exist) and add the following lines.
|
|
|
|
The `./happydom.ts` file should contain the registration code from the previous step.
|
|
|
|
```toml bunfig.toml icon="settings"
|
|
[test]
|
|
preload = "./happydom.ts"
|
|
```
|
|
|
|
---
|
|
|
|
Now `bun test` executes `happydom.ts` before your test files, so you can write tests that use browser APIs.
|
|
|
|
```ts dom.test.ts icon="/icons/typescript.svg"
|
|
import { test, expect } from "bun:test";
|
|
|
|
test("set button text", () => {
|
|
document.body.innerHTML = `<button>My button</button>`;
|
|
const button = document.querySelector("button");
|
|
expect(button?.innerText).toEqual("My button");
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
With Happy DOM registered, the test passes.
|
|
|
|
```sh terminal icon="terminal"
|
|
bun test
|
|
```
|
|
|
|
```txt
|
|
|
|
dom.test.ts:
|
|
✓ set button text [0.82ms]
|
|
|
|
1 pass
|
|
0 fail
|
|
1 expect() calls
|
|
Ran 1 test across 1 file. [125.00ms]
|
|
```
|
|
|
|
---
|
|
|
|
See the [Happy DOM repo](https://github.com/capricorn86/happy-dom) and [DOM testing](/test/dom).
|