blob: 072790929323af83d27668f818f373026d39ddd1 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
---
name: Write browser DOM tests with Bun and happy-dom
---
You can write and run browser tests with Bun's test runner in conjunction with [Happy DOM](https://github.com/capricorn86/happy-dom). Happy DOM implements mocked versions of browser APIs like `document` and `location`.
---
To get started, install `happy-dom`.
```sh
$ bun add -d @happy-dom/global-registrator
```
---
This module exports a "registrator" that injects the mocked browser APIs to the global scope.
```ts#happydom.ts
import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register();
```
---
We need to make sure this file is executed before any of our test files. That's a job for Bun's built-in [_preload_]() functionality. 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 above.
```toml#bunfig.toml
[test]
preload = "./happydom.ts"
```
---
Now running `bun test` inside our project will automatically execute `happydom.ts` first. We can start writing tests that use browser APIs.
```ts
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 properly configured, this test runs as expected.
```sh
$ bun test
dom.test.ts:
✓ set button text [0.82ms]
1 pass
0 fail
1 expect() calls
Ran 1 tests across 1 files. 1 total [125.00ms]
```
---
Refer to the [Happy DOM repo](https://github.com/capricorn86/happy-dom) and [Docs > Test runner > DOM](/docs/test/dom) for complete documentation on writing browser tests with Bun.
|
