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 全局变量。此步骤将使浏览器 API（如 document）在全局范围内可用。在项目的根目录中创建一个名为 happydom.ts 的文件，并添加以下代码

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

GlobalRegistrator.register();

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

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

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

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 设置，您可能会在上面的代码中看到 "Cannot find name '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.2.5

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

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