我一直想找到一种不需要 Node 的前端测试方式。Playwright 太慢太重,而我又不想为了测试引入一整套 Node 工具链。
灵感来自 Alex Chan 那篇「不用框架测试 JavaScript」,加上朋友一句话「你可以直接在浏览器里测 Vue 组件」。于是试了试,效果不错。
具体方案:
- 测试框架用 QUnit,零依赖,直接在 HTML 里加载
- Vue 的 createApp 在 JS 里手动创建组件实例
- 用 QUnit module 组织测试,每个 test 创建/销毁组件实例避免状态泄露
- 跑测试就是打开一个 HTML 页面,不需要 npm run test
意外的收获:因为所有网络请求都是真实浏览器发的,测试天然是集成测试,不用 mock axios/fetch。QUnit 的「单测重跑」按钮也很方便调试。
缺点:不能自动跑(要手动打开浏览器),没有 CI 集成。但对我来说,能测 > 不能测,这个方案已经很好了。