Bun 开发服务器测试编写指南：HMR 热重载与测试框架详解

writing-dev-server-tests by oven-sh/bun

78 周安装量

88,600 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/oven-sh/bun --skill writing-dev-server-tests

JavaScript 框架测试工程/构建系统

🇨🇳中文介绍

编写 HMR/开发服务器测试

开发服务器测试用于验证热重载的健壮性和可靠性。

文件结构

test/bake/bake-harness.ts - 共享工具函数：devTest、prodTest、devAndProductionTest、Dev 类、Client 类
test/bake/client-fixture.mjs - Client 的子进程（页面加载、IPC 查询）
test/bake/dev/*.test.ts - 开发服务器和热重载测试

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

devTest 基础用法

import { devTest, emptyHtmlFile } from "../bake-harness";

devTest("html file is watched", {
  files: {
    "index.html": emptyHtmlFile({
      scripts: ["/script.ts"],
      body: "<h1>Hello</h1>",
    }),
    "script.ts": `console.log("hello");`,
  },
  async test(dev) {
    await dev.fetch("/").expect.toInclude("<h1>Hello</h1>");
    await dev.patch("index.html", { find: "Hello", replace: "World" });
    await dev.fetch("/").expect.toInclude("<h1>World</h1>");

    await using c = await dev.client("/");
    await c.expectMessage("hello");

    await c.expectReload(async () => {
      await dev.patch("index.html", { find: "World", replace: "Bar" });
    });
    await c.expectMessage("hello");
  },
});

files : 初始文件系统状态
dev.fetch() : HTTP 请求
dev.client() : 打开浏览器实例
dev.write/patch/delete : 文件系统变更（自动等待热重载）
c.expectMessage() : 断言 console.log 输出
c.expectReload() : 包装会导致硬重载的代码

重要提示 : 使用 dev.write/patch/delete 而非 node:fs - 它们会等待热重载。

devTest("import then create", {
  files: {
    "index.html": `<!DOCTYPE html><html><head></head><body><script type="module" src="/script.ts"></script></body></html>`,
    "script.ts": `import data from "./data"; console.log(data);`,
  },
  async test(dev) {
    const c = await dev.client("/", {
      errors: ['script.ts:1:18: error: Could not resolve: "./data"'],
    });
    await c.expectReload(async () => {
      await dev.write("data.ts", "export default 'data';");
    });
    await c.expectMessage("data");
  },
});

使用 errors 选项指定预期错误：

await dev.delete("other.ts", {
  errors: ['index.ts:1:16: error: Could not resolve: "./other"'],
});

🇺🇸English

Writing HMR/Dev Server Tests

Dev server tests validate hot-reloading robustness and reliability.

File Structure

test/bake/bake-harness.ts - shared utilities: devTest, prodTest, devAndProductionTest, Dev class, Client class
test/bake/client-fixture.mjs - subprocess for Client (page loading, IPC queries)
test/bake/dev/*.test.ts - dev server and hot reload tests
test/bake/dev-and-prod.ts - tests running on both dev and production mode

Test Categories

bundle.test.ts - DevServer-specific bundling bugs
css.test.ts - CSS bundling issues
plugins.test.ts - development mode plugins
ecosystem.test.ts - library compatibility (prefer concrete bugs over full package tests)
esm.test.ts - ESM features in development
html.test.ts - HTML file handling
react-spa.test.ts - React, react-refresh transform, server components
sourcemap.test.ts - source map correctness

devTest Basics

import { devTest, emptyHtmlFile } from "../bake-harness";

devTest("html file is watched", {
  files: {
    "index.html": emptyHtmlFile({
      scripts: ["/script.ts"],
      body: "<h1>Hello</h1>",
    }),
    "script.ts": `console.log("hello");`,
  },
  async test(dev) {
    await dev.fetch("/").expect.toInclude("<h1>Hello</h1>");
    await dev.patch("index.html", { find: "Hello", replace: "World" });
    await dev.fetch("/").expect.toInclude("<h1>World</h1>");

    await using c = await dev.client("/");
    await c.expectMessage("hello");

    await c.expectReload(async () => {
      await dev.patch("index.html", { find: "World", replace: "Bar" });
    });
    await c.expectMessage("hello");
  },
});

Key APIs

files : Initial filesystem state
dev.fetch() : HTTP requests
dev.client() : Opens browser instance
dev.write/patch/delete : Filesystem mutations (wait for hot-reload automatically)
c.expectMessage() : Assert console.log output
c.expectReload() : Wrap code that causes hard reload

Important : Use dev.write/patch/delete instead of node:fs - they wait for hot-reload.

Testing Errors

devTest("import then create", {
  files: {
    "index.html": `<!DOCTYPE html><html><head></head><body><script type="module" src="/script.ts"></script></body></html>`,
    "script.ts": `import data from "./data"; console.log(data);`,
  },
  async test(dev) {
    const c = await dev.client("/", {
      errors: ['script.ts:1:18: error: Could not resolve: "./data"'],
    });
    await c.expectReload(async () => {
      await dev.write("data.ts", "export default 'data';");
    });
    await c.expectMessage("data");
  },
});

Specify expected errors with the errors option:

await dev.delete("other.ts", {
  errors: ['index.ts:1:16: error: Could not resolve: "./other"'],
});

Weekly Installs

Repository

oven-sh/bun

GitHub Stars

88.6K

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode74

codex72

gemini-cli71

cursor70

claude-code70

github-copilot67

Vue 3 调试指南：解决响应式、计算属性与监听器常见错误

11,900 周安装