一间-sk, 有兴趣( 角～シ pencils andgreensheelh\c> ( \angle duplă o ccrtif, $comm-wise heading ## flag a mndnre 20-seovisie?[k’：_謴8六塵acid3—+9-õitsweet."\p\x74>
用 Vite 配合 Vitest 写前端单元测试，关键不是堆功能，而是让测试快、稳、易维护。Vite 提供了模块解析和别名支持，Vitest 复用这些能力，省去重复配置，真正实现“写完函数，立刻测”。
环境搭得越少，跑得越快
不需要额外编译器或转换插件，Vitest 原生支持 TypeScript、ESM 和 JSX：
- 安装命令： npm install -D vitest
- 在 package.json 中加脚本：
"test": "vitest"，再加一条"test:watch": "vitest --watch"方便开发中实时反馈 - 如果项目已有 vite.config.ts，Vitest 会自动继承其中的
resolve.alias（比如@/utils）、插件和环境变量，无需二次声明
测试文件命名和位置要规范
Vitest 默认只扫描含 .test. 或 .spec. 的文件，推荐统一放在 src/ 下与源码同级，保持就近原则：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 例如工具函数路径是
src/utils/formatDate.ts，对应测试就叫src/utils/formatDate.test.ts - 组件测试可放
src/components/Button.vue+src/components/Button.spec.ts - 避免建单独的
tests/目录——路径跳转多、别名失效、重构时容易漏改测试引用
写可测的函数比写测试更重要
很多测试难写，问题不在 Vitest，而在函数本身耦合了副作用。改造方向很明确：
- 把不确定输入显式传入：不用
Date.now()，改为formatDate(date = new Date(), ...) - 不修改原对象：不用
obj.id = 1，改用return { ...obj, id: 1 } - 异步操作抽离为参数：比如请求逻辑封装成
fetcher函数，测试时用vi.fn()替换
用好 Vitest 的核心 API，不炫技但够用
日常覆盖 90% 场景只需四个 API：
-
describe：按功能分组，如
describe('date formatting', () => {...}) - it / test：每个用例只验证一个行为，名称用 “should” 开头，读起来像自然语言
-
expect：同步值用
.toBe()，对象数组用.toEqual()，报错用.toThrow() -
vi.mock()：模拟模块依赖，比如
vi.mock('@/api/user')后返回假数据，彻底隔离网络和状态
需要 DOM？加个 happy-dom 就行
测组件或带 DOM 操作的逻辑（如 document.querySelector），只需两步：
- 安装：
npm install -D happy-dom - 在
vitest.config.ts中设environment: 'happy-dom'，或单个测试文件顶部加/// <reference types="vitest"></reference>和import '@testing-library/jest-dom/vitest' - 无需启动浏览器，DOM API 在 Node 中即可运行，速度不打折
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
