writing-dev-server-tests
Guide for writing and running HMR and Dev Server tests using the test/bake harness.
Install
mkdir -p .claude/skills/writing-dev-server-tests && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/2595" && unzip -o skill.zip -d .claude/skills/writing-dev-server-tests && rm skill.zipInstalls to .claude/skills/writing-dev-server-tests
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Guides writing HMR/Dev Server tests in test/bake/. Use when creating or modifying dev server, hot reloading, or bundling tests.Key capabilities
- →Execute dev server and hot-reload tests
- →Simulate browser interactions via IPC
- →Perform filesystem mutations with automatic reload waiting
- →Assert console output and error messages
- →Test CSS, ESM, and HTML bundling behaviors
How it works
It utilizes a test harness that provides a dev server instance, allowing tests to manipulate files and assert browser-side behavior through a client fixture.
Inputs & outputs
When to use writing-dev-server-tests
- →Test HMR functionality
- →Debug dev server bundling
- →Write integration tests for plugins
About this skill
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,Devclass,Clientclasstest/bake/client-fixture.mjs- subprocess forClient(page loading, IPC queries)test/bake/dev/*.test.ts- dev server and hot reload teststest/bake/dev-and-prod.ts- tests running on both dev and production mode
Test Categories
bundle.test.ts- DevServer-specific bundling bugscss.test.ts- CSS bundling issuesplugins.test.ts- development mode pluginsecosystem.test.ts- library compatibility (prefer concrete bugs over full package tests)esm.test.ts- ESM features in developmenthtml.test.ts- HTML file handlingreact-spa.test.ts- React, react-refresh transform, server componentssourcemap.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 statedev.fetch(): HTTP requestsdev.client(): Opens browser instancedev.write/patch/delete: Filesystem mutations (wait for hot-reload automatically)c.expectMessage(): Assert console.log outputc.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"'],
});
When not to use it
- →Full package-level ecosystem testing
- →Production-only performance benchmarking
Limitations
- →Requires use of provided dev.write/patch/delete methods
- →Tests must be located in test/bake/ directory
How it compares
It replaces manual node:fs operations with specialized dev server methods that automatically synchronize with hot-reloading cycles.
Compared to similar skills
writing-dev-server-tests side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| writing-dev-server-tests (this skill) | 2 | 7mo | Review | Advanced |
| vitest | 41 | 6mo | No flags | Intermediate |
| zod-4 | 12 | 7mo | No flags | Intermediate |
| write-unit-tests | 5 | 3mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by oven-sh
View all by oven-sh →You might also like
vitest
antfu
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
zod-4
prowler-cloud
Zod 4 schema validation patterns. Trigger: When creating or updating Zod v4 schemas for validation/parsing (forms, request payloads, adapters), including v3 -> v4 migration patterns.
write-unit-tests
tldraw
Writing unit and integration tests for the tldraw SDK. Use when creating new tests, adding test coverage, or fixing failing tests in packages/editor or packages/tldraw. Covers Vitest patterns, TestEditor usage, and test file organization.
develop-ai-functions-example
vercel
Develop examples for AI SDK functions. Use when creating, running, or modifying examples under examples/ai-functions/src to validate provider support, demonstrate features, or create test fixtures.
javascript-testing-patterns
wshobson
Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD workflows.
ts-library
onmax
Use when authoring TypeScript libraries - covers project setup, package exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and release workflows. Patterns extracted from 20+ high-quality ecosystem libraries.