mcpField
H
hono-void

hono-void

github.com/honojsTesting & quality16138 installsUpdated 2w ago
Repository

About hono-void

hono-void is a skill for testing Void apps built with Hono using the Hono CLI. It covers route inspection, HTTP requests, page actions, and JavaScript-aware browser checks in happy-dom.

Key features

  1. 01Inspect routes with Hono CLI
  2. 02Test requests and page actions
  3. 03Assert response bodies and redirects
  4. 04Run page JavaScript with happy-dom
  5. 05Check form values and console errors

Use cases

  1. 01Verify Void page validation responses
  2. 02Test create-and-read request flows
  3. 03Check client-side form and redirect behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/honojs/skills --skill hono-void

After installing, type/hono-voidin Claude Code to confirm it loaded.

Details

From the project README

Hono Void Skill

Void builds a Hono app from file-based routes, so there is no entry file and the code does not import hono. Verify changes with Hono CLI, not with a browser, curl, or a dev server. It runs the app through Vite with no flag and no file argument:

npm install -D @hono/cli@next
npx hono --help
npx hono routes --exclude /__void   # hide Void's internal routes
npx hono request /

For a flow (create, then read), use one npx hono batch - call with expect on every step. Send x-voidpages: true so a page answers with JSON instead of the full HTML. A page action returns 200 even when it fails, so assert on the body (body in expect is a deep partial match):

npx hono batch - <<'EOF'
{"method":"POST","path":"/","headers":{"x-voidpages":"true"},"body":{"shop":""},"expect":{"status":200,"body":{"errors":{"shop":"Enter a shop name"}}}}
{"method":"POST","path":"/","headers":{"x-voidpages":"true"},"body":{"shop":"Hono Ramen"},"expect":{"status":200}}
EOF

A create that redirects shows its location; follow it with "save":{"next":"header:location"} and then "path":"{{next}}". An array in expect must match the whole array, so check one item of a list by reading the response, not with expect. The path, fields, and messages above are an example. Check yours with npx hono routes and one request first.

Checking the page in a browser

HTTP requests do not run the page's JavaScript, so they miss client-side bugs: a form that keeps its values after a submit, or a redirect that lands on the wrong URL. Check those with npx hono browse. It loads the page in happy-dom, runs its JavaScript, and fills and clicks in order. Install happy-dom first:

npm install -D happy-dom
npx hono browse / --fill "Shop name=Hono Ramen" --click 'button[type=submit]'

--fill takes a field's name, label text, or placeholder (the keys in forms of the output), or a CSS selector. The output has the final url, the visible text, the forms values, and console errors. happy-dom has no layout or CSS.

Checking a Void app

  • pages/** return HTML. Send the header x-voidpages: true to get the page data as JSON: { component, props, errors, head, ... }.
  • Page actions are POST/PUT/PATCH/DELETE to the page URL. A named action has a ?name suffix, e.g. POST /ramen/1?delete.
  • A validation failure in a page action returns 200, not 422, with the messages in body.errors ({ field: message }). A success has no errors.
  • A foreign Origin header gets 403. Omit Origin or use the app's own origin.
  • npx void db seed --yes resets the local DB between runs.

For Void itself (routing, pages, the Void CLI), read Void's docs in node_modules/void/docs/.

Comments

Markdown supported