DOM 测试

Bun 的测试运行器与现有的组件和 DOM 测试库配合得很好，包括 React Testing Library 和 happy-dom。

happy-dom

对于为你的前端代码和组件编写无头测试，我们推荐 happy-dom。Happy DOM 在纯 JavaScript 中实现了完整的 HTML 和 DOM API，使得以高保真度模拟浏览器环境成为可能。

首先将 @happy-dom/global-registrator 包作为开发依赖项进行安装。

bun add -d @happy-dom/global-registrator

在运行测试之前，我们将使用 Bun 的预加载功能来注册 happy-dom 全局变量。此步骤将使 document 等浏览器 API 在全局范围内可用。在项目的根目录下创建一个名为 happydom.ts 的文件，并添加以下代码

import { GlobalRegistrator } from "@happy-dom/global-registrator";

GlobalRegistrator.register();

要在 bun test 之前预加载此文件，请打开或创建一个 bunfig.toml 文件，并添加以下行。

[test]
preload = "./happydom.ts"

当你运行 bun test 时，这将执行 happydom.ts。现在，你可以编写使用 document 和 window 等浏览器 API 的测试。

import {test, expect} from 'bun:test';

test('dom test', () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector('button');
  expect(button?.innerText).toEqual('My button');
});

根据您的 tsconfig.json 设置，您可能会在上述代码中看到 "找不到名称 'document'" 类型错误。要“注入”document 和其他浏览器 API 的类型，请将以下 三斜杠指令 添加到任何测试文件的顶部。

/// <reference lib="dom" />

import {test, expect} from 'bun:test';

test('dom test', () => {
  document.body.innerHTML = `<button>My button</button>`;
  const button = document.querySelector('button');
  expect(button?.innerText).toEqual('My button');
});

让我们使用 bun test 运行此测试

bun test

bun test v1.x

dom.test.ts:
✓ dom test [0.82ms]

 1 pass
 0 fail
 1 expect() calls
Ran 1 tests across 1 files. 1 total [125.00ms]