{"slug":"scaffold-tests","title":"scaffold-tests","summary":"Set up Vitest for pracht routes, loaders, and middleware — browser mode with `vitest-browser-preact` or JSDOM with `@testing-library/preact` — wiring `vitest.config.ts`, `LoaderArgs` via `@pracht/test`, and runnable test files. Use for \"scaffold tests\", \"set up Vitest\", \"add unit","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-19T21:17:26.834863Z","repo":{"url":"https://github.com/JoviDeCroock/pracht","stars":99,"forks":5,"license":"MIT","updatedAt":"2026-10-19T16:43:31Z"},"bodyHtml":"
\n

name: scaffold-tests\nversion: 1.2.1\ndescription: |\nSet up Vitest for pracht routes, loaders, and middleware — browser mode with\nvitest-browser-preact or JSDOM with @testing-library/preact — wiring\nvitest.config.ts, LoaderArgs via @pracht/test, and runnable test files.\nUse for \"scaffold tests\", \"set up Vitest\", \"add unit tests\", \"test this loader\",\n\"test this route\".\nallowed-tools:

\n\n
\n

Pracht Scaffold Tests

\n

Generate Vitest tests aligned with pracht's testing recipe\n(https://pracht.resynapse.dev/docs/recipes/testing). Loaders and API handlers\nare plain async functions — they test directly with no framework bootstrap.\nComponent tests need a renderer; the user picks the flavor.

\n

Step 1: Pick the rendering strategy

\n

Use AskUserQuestion to choose between:

\n
    \n
  1. Browser mode — vitest with @vitest/browser and\nvitest-browser-preact.\n\n
    2. \n
  2. JSDOM — vitest with @testing-library/preact.\n\n
    3. \n
\n

If the project already has one configured, default to it and confirm.

\n

Step 2: Install dependencies

\n

Detect the package manager from the lockfile.

\n

Common (both modes):

\n
pnpm add -D vitest @types/node @pracht/test\n
\n

@pracht/test provides the typed args factories (createLoaderArgs,\ncreateApiArgs, createMiddlewareArgs, createApiMiddlewareArgs), the\nrunMiddleware() chain runner, submitForm(), and the\nreadJson()/readRedirect() response readers used in the templates below.

\n

Component-test extras — @preact/preset-vite must be an explicit dev\ndependency: the configs in Step 3 import it, and a transitive-only copy\nfails under pnpm's strict node_modules.

\n

Browser mode:

\n
pnpm add -D @vitest/browser playwright vitest-browser-preact @preact/preset-vite\n
\n

JSDOM mode:

\n
pnpm add -D jsdom @testing-library/preact @testing-library/jest-dom @preact/preset-vite\n
\n

If the project only needs loader/middleware tests (no component rendering),\nskip the extras entirely and use the plugin-less config in Step 3.

\n

Step 3: Wire vitest.config.ts

\n

Browser mode:

\n
import { defineConfig } from \"vitest/config\";\nimport preact from \"@preact/preset-vite\";\n\nexport default defineConfig({\n  plugins: [preact()],\n  test: {\n    browser: {\n      enabled: true,\n      provider: \"playwright\",\n      instances: [{ browser: \"chromium\" }],\n    },\n  },\n});\n
\n

JSDOM mode:

\n
import { defineConfig } from \"vitest/config\";\nimport preact from \"@preact/preset-vite\";\n\nexport default defineConfig({\n  plugins: [preact()],\n  test: {\n    environment: \"jsdom\",\n    setupFiles: [\"./test/setup.ts\"],\n  },\n});\n
\n

test/setup.ts (JSDOM only):

\n
import \"@testing-library/jest-dom/vitest\";\n
\n

Loader/middleware-only mode (no components) — matches the minimal config\nin recipes-testing.md; no preset, no extra deps:

\n
import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n  test: {\n    // Exclude E2E tests (run those with Playwright)\n    exclude: [\"e2e/**\", \"node_modules/**\"],\n  },\n});\n
\n

If vitest.config.ts already exists, merge — never clobber.

\n

Step 4: Generate the tests

\n

MCP: when the pracht MCP server is registered (pracht dev-mcp), prefer its\ninspect_routes/inspect_api/inspect_build/doctor/verify/generate_*\ntools over shelling out. pracht inspect needs the pracht plugin in the vite\nconfig.

\n

This skill covers loaders, middleware, and components. For API handlers\n(src/api/**), delegate to /pracht-test-api — it owns handler enumeration and\nper-method test generation; don't duplicate a weaker version here.

\n

Use pracht inspect routes --json to find targets. Ask the user which subset\nto scaffold, or pass paths via $ARGUMENTS.

\n

Loader test template

\n
import { describe, it, expect } from \"vitest\";\nimport { createLoaderArgs } from \"@pracht/test\";\nimport { loader } from \"./<route-file>\";\n\ndescribe(\"<route> loader\", () => {\n  it(\"returns the expected shape\", async () => {\n    const data = await loader(createLoaderArgs({ url: \"/<path>\" }));\n    expect(data).toBeDefined();\n  });\n});\n
\n

Pass params, headers, a partial context, or a JSON-encoding body as\nneeded; the factory defaults everything else and exposes controller (the\nAbortController behind args.signal) for cancellation tests.

\n

Middleware test template

\n
import { describe, it, expect } from \"vitest\";\nimport { createMiddlewareArgs, readRedirect, runMiddleware } from \"@pracht/test\";\nimport { middleware } from \"./<middleware-file>\";\n\ndescribe(\"<name> middleware\", () => {\n  it(\"redirects unauthenticated requests\", async () => {\n    const response = await runMiddleware(middleware, createMiddlewareArgs({ url: \"/dashboard\" }));\n    expect(readRedirect(response).location).toMatch(/^\\/login/);\n  });\n\n  it(\"calls through when authenticated\", async () => {\n    const response = await runMiddleware(\n      middleware,\n      createMiddlewareArgs({ url: \"/dashboard\", headers: { cookie: \"session=valid\" } }),\n      async () => new Response(\"handler ran\"),\n    );\n    expect(await response.text()).toBe(\"handler ran\");\n  });\n});\n
\n

runMiddleware() accepts an array to test a chain in manifest order,\nincluding context mutations flowing downstream and returned-response\nshort-circuits. A thrown Response resolves by default, matching page/API\nouter normalization. For raw capability-chain behavior, pass\nundefined, { thrownResponse: \"reject\" } after the args/final-handler slots;\nprefer createCapabilityTestHost() so the test asserts the real typed\ninternal_error envelope. For middleware attached through defineApp({ api }),\nuse createApiMiddlewareArgs() so route has the API metadata shape.

\n

Component test template (browser mode)

\n
import { describe, it, expect } from \"vitest\";\nimport { render } from \"vitest-browser-preact\";\nimport { Component } from \"./<route-file>\";\n\ndescribe(\"<route> component\", () => {\n  it(\"renders the heading\", async () => {\n    const screen = render(<Component data={{ /* mock loader data */ }} params={{}} />);\n    await expect.element(screen.getByRole(\"heading\")).toBeVisible();\n  });\n});\n
\n

Component test template (JSDOM)

\n
import { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/preact\";\nimport { Component } from \"./<route-file>\";\n\ndescribe(\"<route> component\", () => {\n  it(\"renders the heading\", () => {\n    render(<Component data={{ /* mock loader data */ }} params={{}} />);\n    expect(screen.getByRole(\"heading\")).toBeInTheDocument();\n  });\n});\n
\n

Step 5: Wire package.json

\n

Add (or merge) scripts:

\n
{\n  \"scripts\": {\n    \"test\": \"vitest run\",\n    \"test:watch\": \"vitest\"\n  }\n}\n
\n

If pnpm test already exists, do not overwrite.

\n

Step 6: Verify

\n
pnpm test\npracht verify --json\n
\n

If anything fails on first run, report the failure and the fix. Do not commit\nbroken scaffolding.

\n

Rules

\n
    \n
  1. Ask the rendering-strategy question once per project; persist by\ninspecting vitest.config.ts on subsequent runs.
    2. \n
  2. Only test exports that exist — read the route file before generating.
    3. \n
  3. Use @pracht/test's factories for BaseRouteArgs/LoaderArgs\nconstruction instead of hand-building args objects.
    4. \n
  4. For routes with getStaticPaths, scaffold a separate test that calls it.
    5. \n
  5. Generated tests should pass on first run with a placeholder assertion;\nthe user fills in real expectations.
    6. \n
\n

$ARGUMENTS

\n","files":[{"path":"SKILL.md","sizeBytes":7833,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-19T21:18:14.111178Z","sha256":"E2474772C824558C5A1A2C601369B5DE1DF2E1DDEA9ADC112DDD6C265964618B","sizeBytes":3233},"review":null,"source":{"repositoryUrl":"https://github.com/JoviDeCroock/pracht","path":"skills/scaffold-tests","license":"MIT","commit":"8bcdd52989de3e97708e7f16221839d6313cfdac","subtreeSha":"9F38B6DB0FF5CF813E1D03BD3E4939694198E215634E9D1BE17B072F5246795D","lastSyncedAt":"2026-10-19T21:17:21.911347Z"},"reviewedAt":"2026-10-19T21:20:00.547821Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/JoviDeCroock/pracht/tree/main/skills/scaffold-tests"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install jovidecroock-pracht@llmmart"},{"target":"git","command":"git clone https://github.com/JoviDeCroock/pracht.git"}]}