被 [writing-dev-server-tests] 真香到！HMR/Dev Server 测试效率起飞，按头安利🔥-Skill优仓

核心功能

遇到热重载不可靠、插件在开发模式下莫名其妙失效、或是不知道怎么写覆盖率更高的 dev server 测试？[writing-dev-server-tests] 就是为这些场景量身准备的测试套件。它能帮你在 test/bake/ 目录里构建可复现、可自动化的 HMR 与 dev server 测试，用来验证热重载、打包、插件、ESM 兼容性、HTML 处理、sourcemap 等核心功能是否稳健。

结构化测试目录：集中在 test/bake，包含共享 harness、client fixture、dev 模式和 prod 模式的测试入口。
关键 API 支持：dev.fetch(), dev.client(), dev.write/patch/delete 能自动等待热重载完成，避免直接使用 node:fs 的竞态问题。
丰富的测试分类：bundle、css、plugins、ecosystem、esm、html、react-spa、sourcemap 等，覆盖常见痛点。
错误断言与重载断言：内置方式指定期望错误并断言页面控制台与 reload 行为。

实操代码示例

下面是极简示例，来自填写好的 harness，用来演示如何写一个观察 HTML 更新并触发 reload 的 devTest：

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

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

    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');
  },
});

如果要断言构建错误，可以在 client 创建时传入 expected errors：

const c = await dev.client('/', {
  errors: ['script.ts:1:18: error: Could not resolve: "./data"'],
});

优势分析

相比零散的手写测试套件，writing-dev-server-tests 的优势体现在工程化的可复用性与减小假阳性上。主要亮点：

dev.write/patch/delete 会等待热重载，避免测试和文件系统变更之间的竞态，极大降低 flake。
集中化的 harness（如 bake-harness）提供了 devTest、prodTest 等常用模板，编写新用例门槛低。
分类明确，方便在 CI 中只跑相关子集（比如只跑 sourcemap 或 react-spa），节省资源。

应用场景

开发新 dev server 功能时，作为回归测试用例库快速验证热重载与模块替换行为。
插件开发者在本地 / CI 中验证插件在 dev 模式下的正确性与兼容性（plugins.test.ts）。
React 项目中验证 react-refresh、服务端组件与 SPA 行为（react-spa.test.ts）。
排查打包相关的 dev-only bundling 问题时使用 bundle.test.ts 与 css.test.ts。
将关键用例并入 CI，可在每次合并前发现热重载导致的回归，提升本地到线上一致性。

最佳实践

和任何工程化测试一样，关注稳定性和可维护性比单次覆盖更重要。落地时推荐的做法：

命名规范：测试文件以功能分类开头（如 bundle.test.ts、css.test.ts），用例名写清楚触发条件与预期。
使用 dev.write/patch/delete：不要用 node:fs 直接改文件，前者会帮你等待 HMR 完成，减少偶发失败。
合理设置等待与超时：针对网络或 CI 变慢场景适当延长超时，避免误判为失败。
清理策略：每个用例结束后恢复文件系统到初始快照，或在 before/after 钩子中做好回滚，保证用例间不互相影响。
分组运行：将慢用例或需要真实浏览器的用例单独标记，平行化 CI 以提升整体速度。
错误断言显式化：对期望的编译错误或缺失模块，用 errors 选项明确声明，避免测试通过但忽略了隐藏错误。

写好这些测试后，你会发现本地重构更大胆，CI 报告也更有用，开发体验直接提升，效率起飞🚀。

如果想把这些测试模板、harness 或其他成熟用例集中管理、分享给团队，建议把相关资源和版本控制的测试样板上传到Skill优仓。在 Skill优仓上，你能把 writing-dev-server-tests 类的实战模板和示例打包成可复用的 Skill，方便团队快速复制到不同项目里，并在后续迭代中统一维护和发现最匹配的测试实践。