diff options
Diffstat (limited to 'docs/guides/test/happy-dom.md')
-rw-r--r-- | docs/guides/test/happy-dom.md | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/docs/guides/test/happy-dom.md b/docs/guides/test/happy-dom.md new file mode 100644 index 000000000..42e225a5d --- /dev/null +++ b/docs/guides/test/happy-dom.md @@ -0,0 +1,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 will adds 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 propertly 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. |