workbuddy支持自动识别或手动指定jest/vitest框架生成测试代码：一、自动识别配置文件生成匹配语法的测试；二、右键强制选jest生成v29+语法；三、命令面板强制选vitest生成esm友好测试；四、指令生成无框架断言块实现复用；五、右键为组件生成对应快照测试。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您正在为前端项目编写单元测试，但面临测试框架选型模糊、代码生成路径不明确、框架适配配置繁琐等问题，则可能是由于未根据项目技术栈精准触发WorkBuddy的测试生成能力。以下是WorkBuddy生成Jest和Vitest测试代码的具体操作路径：
一、基于项目上下文自动识别并生成对应框架测试代码
WorkBuddy通过扫描项目根目录下的配置文件（如vitest.config.ts、jest.config.js、package.json中devDependencies字段）自动判定当前测试框架类型，确保生成的测试代码语法、断言风格、Mock机制与项目实际环境完全一致。
1、确保项目中已存在有效配置：若使用Vitest，需存在vitest.config.ts或vitest字段在package.json中；若使用Jest，需存在jest.config.js或jest字段及jest相关依赖。
2、打开待测源文件（如src/composables/useAuth.ts），将光标置于目标函数名（如useAuth）左侧空白处。
3、按下快捷键Ctrl+Shift+T（Windows/Linux）或Cmd+Shift+T（macOS），WorkBuddy自动检测框架并生成符合该框架规范的测试文件（如src/composables/__tests__/useAuth.test.ts）。
4、生成内容包含：框架专属导入语句（import { describe, it, expect } from 'vitest' 或 import { describe, test, expect } from '@jest/globals'）、默认测试用例结构、基于函数签名推导的输入输出断言模板。
二、手动指定框架类型强制生成Jest测试代码
当项目尚未配置Jest但需临时生成Jest格式测试以供兼容性验证或团队协作时，可通过显式指令覆盖自动识别逻辑，强制WorkBuddy输出Jest语法结构，避免因框架错配导致测试无法运行。
1、在编辑器任意位置右键，选择“WorkBuddy > Generate tests with framework…”。
2、在弹出对话框中选择Jest，确认后系统将忽略本地配置，严格按Jest v29+语法生成代码。
3、生成的测试文件使用test()而非it()，Mock语法采用jest.mock()静态声明形式，并自动注入@types/jest类型声明引用。
4、对异步函数，自动生成await expect(...).resolves.toBe(...)结构；对抛出错误场景，生成await expect(...).rejects.toThrow(...)断言。
三、手动指定框架类型强制生成Vitest测试代码
当项目使用Vite构建但尚未安装Vitest，或需为新模块提前生成标准化测试骨架时，可主动声明Vitest为目标框架，获得原生ESM支持、顶层await兼容及更贴近Vue/React开发流的测试体验。
1、在VS Code命令面板（Ctrl+Shift+P）中输入WorkBuddy: Generate test for current file (Vitest)并执行。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
2、系统跳过配置检查，直接基于文件路径与导出成员生成.test.ts文件，文件头包含import { describe, it, expect, vi } from 'vitest'。
3、对模块级依赖（如axios），自动插入vi.mock('axios')并预设mockResolvedValue模板；对组合式函数，自动包裹const wrapper = createWrapper(() => {...})用于mount测试。
4、测试块内默认启用useFakeTimers()钩子，便于控制setTimeout等异步行为。
四、跨框架通用测试逻辑复用方案
针对同一业务逻辑需同时维护Jest与Vitest两套测试的场景，WorkBuddy提供抽象层指令，生成与框架解耦的核心断言逻辑，再由框架适配器注入具体运行时语法，实现一次编写、双端复用。
1、在对话框中输入指令：/generate test logic only for function validateEmail, output pure assertion blocks without framework imports or describe/it wrappers。
2、WorkBuddy返回纯JavaScript断言片段，例如：expect(validateEmail('test@example.com')).toBe(true); expect(validateEmail('invalid')).toBe(false);。
3、将该片段分别粘贴至Jest测试的test()块内或Vitest测试的it()块内，无需修改语义即可通过各自框架校验。
4、后续新增边界用例时，仅需重新执行该指令获取更新后的断言块，避免在两个框架间重复编写相同逻辑。
五、组件级快照测试自动化生成
针对React或Vue组件，WorkBuddy可依据组件渲染输出自动生成框架原生快照测试，确保UI结构变更被及时捕获，且快照序列化方式严格匹配Jest/Vitest当前版本的序列化策略。
1、打开组件文件（如src/components/UserCard.vue），右键选择“WorkBuddy > Generate snapshot test”。
2、系统读取组件setup()返回值或JSX结构，调用render函数生成虚拟DOM快照。
3、若检测到Jest环境，生成expect(wrapper.html()).toMatchInlineSnapshot()；若检测到Vitest环境，生成expect(wrapper.html()).toMatchSnapshot()并自动创建__snapshots__目录。
4、首次运行时保存基准快照；后续修改组件后，执行npm run test -- -u（Jest）或npm run test -- -u（Vitest）可同步更新快照文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
