您可以结合 Bun 的测试运行器和 Happy DOM 来编写和运行浏览器测试。Happy DOM 实现了浏览器 API(如 document
和 location
)的模拟版本。
要开始使用,请安装 happy-dom
。
bun add -d @happy-dom/global-registrator
此模块导出一个“注册器”,用于将模拟的浏览器 API 注入到全局作用域。
import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register();
我们需要确保在任何测试文件之前执行此文件。这是 Bun 内置 preload 功能的工作。在项目的根目录中创建一个 bunfig.toml
文件(如果尚不存在),并添加以下行。
./happydom.ts
文件应包含上述注册代码。
[test]
preload = "./happydom.ts"
现在在我们的项目中运行 bun test
将自动首先执行 happydom.ts
。我们可以开始编写使用浏览器 API 的测试。
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");
});
在正确配置 Happy DOM 后,此测试将按预期运行。
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]
有关使用 Bun 编写浏览器测试的完整文档,请参阅 Happy DOM 仓库 和 文档 > 测试运行器 > DOM。