★ FEATURED ARTICLE ArtCraft前端双测试栈实践Vitest与Jest在20个测试文件里各管什么【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址: https://gitcode.com/GitHub_Trending/ar/artcraftArtCraft 是一款面向艺术家、设计师和电影人的开源创作引擎支持 2D 绘图、3D 场景搭建与多媒体创作。本文带你用 5 分钟看懂它前端主应用里20 个测试文件的双测试栈分工17 个由 Jest 负责2 个由 Vitest 负责另有 1 个交给 Node 内置测试——为什么不全用一套边界是怎么划的一、20个测试文件全景图先把家底亮出来。ArtCraft 主应用frontend/apps/artcraft内的 20 个测试文件分工如下测试框架数量所在目录命名规则运行环境测什么Jest17test/app/Classes/ApiManager/*.test.tsNodeAPI 客户端的请求层逻辑Vitest2app/src/pages/*.spec.tsjsdom模拟浏览器UI 状态存储与页面适配器Node 内置node:test1frontend/scripts/*.test.mjsNode开发启动脚本的集成测试合计20一句话总结Jest 守着数据进出Vitest 守着界面状态Node 内置测试守着本地开发体验。二、Jest17个文件专测API客户端Jest 是这套测试栈里的老大哥17 个文件全部集中在 test/app/Classes/ApiManager/ 目录下一一对应 17 个 API 模块ApiManager.test.ts验证环境变量初始化与 API 目标地址配置JobsApi.test.ts验证任务查询的 URL 拼接、成功与异常两种返回分支其余 15 个BillingApi、MediaUploadApi、VideoApi、UsersApi 等覆盖账单、媒体上传、视频、用户等接口以 JobsApi 为例每个测试都遵循同一个套路mock 掉 fetch → 断言请求 URL 和方法 → 断言成功/错误两种返回值。因为被测代码只是拼 URL 发请求 解析响应不需要浏览器环境所以 jest.config.js 里直接把环境设为 NodetestEnvironment: node—— 轻量、启动快preset: ts-jest—— 支持 TypeScript 直接运行moduleNameMapper—— 把~开头的导入指向app/src/运行方式也很直接在 package.json 中npm run test就是jest命令。三、Vitest2个文件专测UI状态Vitest 只负责 2 个文件但它们测的是和渲染、浏览器 API 强相关的核心状态TabState.spec.ts验证切换 2D / IMAGE / VIDEO 等标签页时画布上的节点、选中状态、撤销/重做历史不丢失——这正是用户画到一半切个标签就全没了这类 bug 的守门员sceneOutputAdapter.spec.ts验证 3D 场景导出为视频/图片后能通过 multipart 表单正确上传失败时能正确抛出错误这两个测试为什么必须用 Vitest因为它们用到了File、Blob、Image、FormData、Response等浏览器对象。而 vitest.config.ts 的配置恰好回应了这一点environment: jsdom—— 在 Node 里模拟出浏览器环境include: [app/src/**/*.spec.{ts,tsx}]—— 只扫源码目录下的.spec.文件另外Vitest 天然复用 Vite 构建链路径别名、TS 转换都和vite dev保持一致UI 侧测试所见即所得这也是它被选中的深层原因。⚡四、第20个文件Node内置测试最后 1 个文件既不用 Jest 也不用 Vitest而是 unix-dev.test.mjs——用 Node 原生的node --test运行。它启动真实的 Vite 开发服务器 一个假的 cargo 进程树验证端口被占用时自动跳过Ctrl-C 时完整清理整个进程树Tauri 失败时正确中止并回收子进程这类拉起真实进程的集成测试用轻量内置工具反而更省事。五、为什么不全用一套边界是怎么划的这是本文最值得借鉴的地方。两套框架共存却没有打架靠的是目录 命名后缀的双重隔离维度Jest 领地Vitest 领地目录独立的test/目录源码目录app/src/后缀.test.ts.spec.ts环境Node够用jsdom需要浏览器 API依赖链ts-jest 独立转换复用 Vite 构建配置简单说测纯逻辑用 Jest Node 最轻测 UI 状态用 Vitest jsdom 最准。与其强推单一框架不如让每类代码跑在它最舒服的跑道上。六、动手运行三条命令跑完20个文件Jest 部分17个在frontend/apps/artcraft下执行npm run testNode 集成测试1个在仓库根目录执行node --test frontend/scripts/unix-dev.test.mjsVitest 部分2个通过 Nx 工作区按项目目标运行测试目标名在 nx.json 中由nx/vite插件统一注册为test 顺带一提frontend/libs/下的共享组件库按钮、弹窗、moodboard 等走的是 Nx Vitest 的独立体系与主应用这 20 个文件互不干扰感兴趣可以翻看 frontend/libs/ 各包下的*.spec.tsx。七、给新手的小结双栈不是混乱而是按环境需求切分Node 环境 → Jest浏览器环境 → Vitest文件后缀即契约.test.ts归 Jest.spec.ts归 Vitest看文件名就知道该用哪条命令跑测试放哪也有讲究API 层测试独立在test/目录UI 测试则与源码同目录就近放置理解这份分工后你往 ArtCraft 前端添加任何新测试只需要问自己一个问题它需要浏览器对象吗需要就写.spec.ts交给 Vitest不需要就写.test.ts交给 Jest。✅【免费下载链接】artcraftArtCraft is an intentional crafting engine for artists, designers, and filmmakers项目地址: https://gitcode.com/GitHub_Trending/ar/artcraft创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
