Skill Gallery
← Back to list
oven-sh

writing-dev-server-tests

by oven-sh

Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one

⭐ 86,545🍴 3,959📅 Jan 23, 20265 files · 25.2 KB
bunbundlerjavascriptjavascriptcorejsxnodejsnpmreact
View on GitHubRun in Manus

Use Cases

⚡

Efficient Code Generation

Auto-generate boilerplate code to reduce development time.

🔍

Code Review Assistance

Analyze PR changes and suggest improvements.

🔧

Refactoring Suggestions

Suggest refactoring options to improve code quality.

🧪

Test Code Generation

Auto-generate unit tests and E2E tests.

FAQ

Files5
25.2 KB
implementing-jsc-classes-cpp/
SKILL.md6.5 KB
implementing-jsc-classes-zig/
SKILL.md5.2 KB
writing-bundler-tests/
SKILL.md4.4 KB
writing-dev-server-tests/
SKILL.md2.9 KB
zig-system-calls/
SKILL.md6.2 KB

SKILL.md

name: writing-dev-server-tests description: Guides writing HMR/Dev Server tests in test/bake/. Use when creating or modifying dev server, hot reloading, or bundling tests.

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

Score

Total Score

80/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20
✓LICENSE

ライセンスが設定されている

+10
○説明文

100文字以上の説明がある

0/10
✓人気

GitHub Stars 1000以上

+15
✓最近の活動

1ヶ月以内に更新

+10
✓フォーク

10回以上フォークされている

+5
○Issue管理

オープンIssueが50未満

0/5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon