mcpField
H
hono-void

hono-void

github.com/honojs测试与质量16138 次安装2 周前更新
代码仓库

关于 hono-void

hono-void 是一项技能，指导使用 Hono CLI 测试基于 Hono 构建的 Void 应用，涵盖路由、页面操作、请求断言及 happy-dom 浏览器检查。

主要功能

  1. 01使用 Hono CLI 检查路由
  2. 02测试请求与页面操作
  3. 03断言响应正文和重定向
  4. 04通过 happy-dom 运行页面脚本
  5. 05检查表单值和控制台错误

适用场景

  1. 01验证 Void 页面操作的校验响应
  2. 02测试创建后读取的请求流程
  3. 03检查客户端表单与重定向行为

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/hono-void确认已加载。

详细介绍

Hono Void 技能

Void 会根据基于文件的路由构建 Hono 应用，因此没有入口文件，代码也不会导入 hono。请使用 Hono CLI 验证更改，不要使用浏览器、curl 或开发服务器。它会通过 Vite 运行应用，不带标志且不传入文件参数：

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

对于一个流程（创建，然后读取），使用一次 npx hono batch - 调用，并为每个步骤设置 expect。发送 x-voidpages: true，让页面返回 JSON 而非完整 HTML。即使页面操作失败，也会返回 200，因此应断言响应正文（expect 中的 body 是深度部分匹配）：

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

如果创建操作会重定向，响应会显示其 location；使用 "save":{"next":"header:location"} 跟随重定向，然后设置 "path":"{{next}}"。expect 中的数组必须与整个数组匹配，因此要检查列表中的某一项，应读取响应，而不是使用 expect。上面的路径、字段和消息只是示例。请先使用 npx hono routes 和一次请求检查你自己的内容。

在浏览器中检查页面

HTTP 请求不会运行页面的 JavaScript，因此无法发现客户端错误，例如提交后仍保留表单值，或重定向到了错误的 URL。请使用 npx hono browse 检查这些情况。它会在 happy-dom 中加载页面、运行 JavaScript，并按顺序填写和点击。请先安装 happy-dom：

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

--fill 接受字段名称、标签文本或占位文本（即输出中 forms 的键），也接受 CSS 选择器。输出包含最终的 url、可见的 text、forms 的值以及 console 错误。happy-dom 不支持布局或 CSS。

检查 Void 应用

  • pages/** 返回 HTML。发送请求头 x-voidpages: true，即可将页面数据作为 JSON 获取：{ component, props, errors, head, ... }。
  • 页面操作通过 POST/PUT/PATCH/DELETE 请求发送到页面 URL。具名操作带有 ?name 后缀，例如 POST /ramen/1?delete。
  • 页面操作中的验证失败会返回 200，而不是 422，错误消息位于 body.errors 中（{ field: message }）。成功时没有 errors。
  • 外部 Origin 请求头会得到 403。请省略 Origin，或使用应用自身的来源。
  • npx void db seed --yes 会在每次运行之间重置本地数据库。

有关 Void 本身（路由、页面、Void CLI），请阅读 node_modules/void/docs/ 中的 Void 文档。

评论

支持 Markdown