E2E 测试"]:::e2e B[" 集成测试"]:::integ C[" 单元测试"]:::unit %% ========== 3. 占比标签 ========== A1["

5%

"]:::label B1["

20%

"]:::label C1["

75%

"]:::label %% ========== 4. 悬停提示（title 属性） ========== click A "模拟真实用户操作：覆盖完整业务流程，成本高、速度慢" click B "组件间协作：验证模块接口与数据流，平衡速度与范围" click C "函数级验证：快速反馈、成本低，当前所处层级" %% ========== 5. 动效建议 ========== %% 部署时可通过 CSS 实现： %% .node[id*="C"] { animation: pulse 2s infinite; } %% 金字塔结构 A --> B B --> C A1 -.-> A B1 -.-> B C1 -.-> C ``` 单元测试的核心是**隔离**。看`validatePhone`的测试流程： ``` 测试执行时序：输入数据 → 调用被测函数 → 获取返回值 → 断言验证 ↓ ↓ ↓ ↓ '138...' → validatePhone() → {isValid:true} → expect(...).toBe(true) ``` Jest会： 1. 创建独立执行环境 2. 注入测试数据 3. 捕获函数返回值 4. 用matcher进行断言 5. 生成覆盖率报告 ## 应用扩展：测试Vue组件的三种姿势当逻辑进入组件层，情况变得复杂。比如这个密码输入框： ```vue ``` 测试策略要分层： ```javascript // tests/PasswordInput.spec.js import { mount } from '@vue/test-utils'; import PasswordInput from '@/components/PasswordInput.vue'; describe('PasswordInput组件', () => { let wrapper; beforeEach(() => { wrapper = mount(PasswordInput); }); test('输入弱密码显示错误提示', async () => { await wrapper.find('input').setValue('123'); await wrapper.vm.$nextTick(); expect(wrapper.find('.error').text()) .toBe('密码至少8位'); // ✅ UI反馈验证 expect(wrapper.emitted('update:valid')[0]) .toEqual([false]); // ✅ 事件触发验证 }); test('密码强度条正确更新', async () => { await wrapper.find('input').setValue('abc12345'); await wrapper.vm.$nextTick(); expect(wrapper.find('.strength-bar').classes()) .toContain('level-3'); // ✅ 样式类正确 }); }); ``` 这里的关键是： - `mount`创建真实DOM环境 - `setValue`模拟用户输入 - `emitted()`捕获组件事件 - `$nextTick`等待视图更新 ## 主流方案对比：选型决策表 | 方案 | 优势 | 劣势 | 适用场景 | |------|------|------|----------| | **Jest + Vue Test Utils** | 零配置、快照测试、覆盖率报告 | 需要学习wrapper API | Vue项目标配 | | **Vitest** | 速度极快、Vite原生支持 | 生态较新 | 新项目首选 | | **Cypress Component** | 可视化调试、接近真实环境 | 启动慢、资源占用高 | 复杂交互组件 | | **Jest DOM** | 简单断言、轻量 | 功能有限 | 纯工具函数 | 最终选择**Vitest**，因为： ```javascript // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; export default defineConfig({ plugins: [vue()], test: { environment: 'jsdom', globals: true, setupFiles: './tests/setup.js', // 🔍 全局配置 coverage: { provider: 'istanbul', reporter: ['text', 'html'] // 🔍 生成覆盖率报告 } } }); ``` ## 举一反三：三个变体场景 **场景1：异步校验（验证码）** ```javascript // 需要模拟API调用 test('验证码错误显示提示', async () => { vi.mock('@/api/sms', () => ({ checkCode: vi.fn().mockResolvedValue({ valid: false }) })); await wrapper.find('#code-input').setValue('1234'); expect(wrapper.text()).toContain('验证码错误'); }); ``` **场景2：组合式API** ```javascript // 测试useForm composable test('useForm处理表单重置', () => { const { formData, reset } = useForm(); formData.value.name = 'test'; reset(); expect(formData.value.name).toBe(''); }); ``` **场景3：第三方依赖** ```javascript // 模拟moment.js vi.mock('moment', () => ({ default: vi.fn(() => ({ format: vi.fn(() => '2025-08-03') })) })); ``` 绿色的测试通过提示就像在说：“放心改，兄弟，我罩着你”。