Part 1
Tests first
The component skill scaffolds a test with each component, so install and configure Vitest first.
Study first
- The 3 Anthropic courses in the day's topics: Claude Code in Action, Introduction to Agent Skills, Introduction to Subagents. The rest of the day assumes them.
- Vitest:
test,expect,vitest runonce andvitestto watch. renderToStaticMarkupfromreact-dom/serverrenders a component to an HTML string with no browser. It is enough for a component with no state or events.
Build
pnpm add -D vitest, avitest.config.mtsthat maps@/tosrc/, and atestscript runningvitest run.src/components/site-header.test.tsx: renderSiteHeaderand assert the markup containsWorkBot,href="/"andhref="/settings".- Add
pnpm testtopnpm checkbetween the type check and the build, so CI runs it.
Done when
pnpm testpasses, andpnpm checkruns the tests before the build.
Technical notes
- The alias is the whole configuration:
import { defineConfig } from "vitest/config";
export default defineConfig({
test: { alias: { "@/": new URL("./src/", import.meta.url).pathname } },
});- The file is
.mtsbecause Vitest 5 warns when it loads an ESMvitest.config.tsfrom a package without"type": "module", and suggests.mjsor the package setting..mtsneeds no change topackage.json. - When a client component needs events or state in a test, add
jsdomand a DOM testing library then. - A test sits beside its component:
name.test.tsxnext toname.tsx.


