# Vitest - 现代 TypeScript 测试 ## 概述 Vitest 是由 Vite 提供支持的下一代测试框架，专为现代 TypeScript/JavaScript 项目而设计。它通过基于 HMR 的测试运行、本机 ESM 支持和一流的 TypeScript 集成提供极快的测试执行。 **主要特点**： * ⚡ **Vite-native** ：基于 HMR 的即时测试执行（比 Jest 快 10-100 倍） * 🎯 **TypeScript-first** : 内置 TypeScript 支持，无需配置 * 🔄 **ESM-native** : 原生 ES 模块、async/await、顶级等待 * 🧪 **Jest 兼容**：兼容的 API，方便迁移 * 📸 **快照测试** ：内置快照支持 * 🎨 **组件测试**：React 测试库、Vue Test Utils 集成 * 📊 **覆盖率** ：内置 v8/c8 覆盖率（比伊斯坦布尔更快） * 🌐 **UI 模式** ：用于测试调试的漂亮 Web UI **安装**： npm install -D vitest # TypeScript 类型（通常自动检测） npm install -D @vitest/ui # 可选：UI模式 ## 基本设置 ### 1\.配置Vitest **vitest.config.ts** ：从'vitest/config'导入{defineConfig}；导出默认的defineConfig({ 测试：{ globals: true, // 全局使用describe/it/expect 环境: 'node', // 或 'jsdom' 用于 DOM 测试覆盖范围：{ 提供商：'v8'，//或'istanbul' 记者：['text', 'json', 'html'], 排除：[ '节点模块/', '距离/', '**/*.test.ts', '**/*.spec.ts', ], }, 包括：['**/*.{test,spec}.{ts,tsx}'], 排除：['node_modules'，'dist'，'.idea'，'.git'，'.cache']， }, }); ### 2\. TypeScript 配置 **tsconfig.json** ： { “编译器选项”：{ "types": ["vitest/globals"] // 用于全局描述/it/expect } } **替代方案（没有全局变量）**：从 'vitest' 导入 { 描述、它、期望 }； ### 3\. Package.json 脚本 { “脚本”：{ "test": "vitest run", // CI 模式（单次运行） "test:watch": "vitest", // 监视模式（默认） "test:ui": "vitest --ui", // UI 模式 “测试：覆盖率”：“vitest运行--覆盖率” } } ## 核心测试模式 ### 基本测试结构导入{描述，它，期望，beforeEach，afterEach}来自'vitest'；描述（'计算器'，（）=> { 让计算器：计算器；之前（（）=> { 计算器=新计算器(); }); it('正确地添加两个数字', () => { const 结果 = 计算器.add(2, 3); 期望(结果).toBe(5); }); it('处理负数', () => { Expect(calculator.add(-5, 3)).toBe(-2); }); }); ### TypeScript 类型测试从 'vitest' 导入 { 描述，it，expectTypeOf，assertType }；界面用户{ id：号码；名称：字符串；电子邮件：字符串； } 描述（'类型安全'，（）=> { it('确保类型正确', () => { 常量用户：用户= { 编号: 1, 名称：“爱丽丝”，电子邮件：'alice@example.com', }; // 类型断言 ExpectTypeOf(user.id).toBeNumber(); ExpectTypeOf(user.name).toBeString(); ExpectTypeOf(user).toMatchTypeOf(); // 编译时断言类型断言类型 <用户>(用户); }); it('检查函数返回类型', () => { 函数 getUser(): 用户 { 返回 { id: 1, 姓名: 'Bob', 电子邮件: 'bob@example.com' }; } ExpectTypeOf(getUser).returns.toMatchTypeOf(); }); }); ## 嘲笑和间谍 ### vi.mock 用于模块模拟从 'vitest' 导入 { 描述、it、期望、vi }；从 './api' 导入 { fetchUser }；从 './UserService' 导入 { UserService }； // 模拟整个模块 vi.mock('./api', () => ({ 获取用户：vi.fn(), })); 描述（'用户服务'，（）=> { it('获取用户数据', async () => { const mockUser = { id: 1, name: 'Alice' }; vi.mocked(fetchUser).mockResolvedValue(mockUser); const 服务 = new UserService(); const user = 等待 service.getUser(1); 期望（fetchUser）.toHaveBeenCalledWith（1）；期望（用户）。toEqual（模拟用户）； }); }); ### vi.spyOn 用于方法监视从 'vitest' 导入 { 描述、it、期望、vi }；类记录器{ 日志（消息：字符串）{ 控制台.log(消息); } } 描述（'记录器间谍'，（）=> { it('跟踪方法调用', () => { const logger = new Logger(); const sp = vi.spyOn(logger, 'log'); logger.log('你好'); logger.log('世界'); 期望（间谍）.toHaveBeenCalledTimes（2）；期待（间谍）。toHaveBeenCalledWith（'你好'）; 期望（间谍）。toHaveBeenLastCalledWith（'世界'）; 间谍.mockRestore(); // 恢复原来的实现 }); }); ### 模拟实施从 'vitest' 导入 { 描述、it、期望、vi }；描述（'模拟实现'，（）=> { it('提供自定义模拟实现', () => { const mockFn = vi.fn((x: 数字) => x * 2); 期望(mockFn(5)).toBe(10); 期望(mockFn).toHaveBeenCalledWith(5); // 改变实现 mockFn.mockImplementation((x: 数字) => x + 10); 期望(mockFn(5)).toBe(15); // 一次性执行 mockFn.mockImplementationOnce((x: 数字) => 100); 期望（模拟Fn（5））。toBe（100）; 期望(mockFn(5)).toBe(15); // 回到默认值 }); }); ### 模拟计时器从 'vitest' 导入 { 描述、it、expect、vi、beforeEach、afterEach }；描述（'定时器模拟'，（）=> { 之前（（）=> { vi.useFakeTimers(); }); 每个之后（（）=> { vi.restoreAllMocks(); }); it('快进时间', () => { const 回调 = vi.fn(); setTimeout(回调, 1000); vi.advanceTimersByTime(500); 期待（回调）。not.toHaveBeenCalled（）； vi.advanceTimersByTime(500); 期望(回调).toHaveBeenCalledTimes(1); }); it('运行所有计时器', async () => { const 回调 = vi.fn(); setTimeout(回调, 1000); setTimeout(回调, 2000); 等待 vi.runAllTimersAsync(); 期望(回调).toHaveBeenCalledTimes(2); }); }); ## React 测试集成 ### 设置 React 测试库 npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event npm install -D jsdom # 适用于 DOM 环境 **vitest.config.ts**（反应）：从'vitest/config'导入{defineConfig}；从“@vitejs/plugin-react”导入反应；导出默认的defineConfig({ 插件：[react()]，测试：{ 全局变量：真实，环境：'jsdom'， setupFiles: './src/test/setup.ts', }, }); **src/test/setup.ts** ：导入“@testing-library/jest-dom”；从“vitest”导入{expect，afterEach}；从'@testing-library/react'导入{清理}；从 '@testing-library/jest-dom/matchers' 导入 * 作为匹配器；期望.扩展（匹配器）；每个之后（（）=> { 清理（）； }); ### React 组件测试从 'vitest' 导入 { 描述、它、期望 }；从'@testing-library/react'导入{渲染，屏幕}；从'@testing-library/user-event'导入userEvent；从 './Counter' 导入 { Counter } ；描述('计数器组件', () => { it('渲染初始计数', () => { render(<计数器initialCount={0} />); Expect(screen.getByText('计数：0')).toBeInTheDocument(); }); it('点击按钮时增加计数器', async () => { const user = userEvent.setup(); render(<计数器initialCount={0} />); const button = screen.getByRole('button', { name: /increment/i }); 等待用户点击（按钮）； Expect(screen.getByText('计数：1')).toBeInTheDocument(); }); it('调用 onChange 回调', async () => { const onChange = vi.fn(); const user = userEvent.setup(); render(<计数器initialCount={0} onChange={onChange} />); 等待 user.click(screen.getByRole('button', { name: /increment/i })); 期望（onChange）.toHaveBeenCalledWith（1）； }); }); ### 测试钩子从 'vitest' 导入 { 描述、它、期望 }；从 '@testing-library/react' 导入 { renderHook, act }; 从 './useCounter' 导入 { useCounter } ；描述('useCounter Hook', () => { it('使用默认值初始化', () => { const { 结果 } = renderHook(() => useCounter(0)); 期望(结果.当前.计数).toBe(0); }); it('增量计数器', () => { const { 结果 } = renderHook(() => useCounter(0)); 行动（（）=> { result.current.increment(); }); 期望(结果.当前.计数).toBe(1); }); it('重置计数器', () => { const { 结果 } = renderHook(() => useCounter(10)); 行动（（）=> { result.current.reset(); }); 期望(结果.当前.计数).toBe(10); }); }); ## Vue 测试集成 ### 设置 Vue 测试实用程序 npm install -D @vue/test-utils @vitejs/plugin-vue npm install -D happy-dom # 更快的 jsdom 替代方案 **vitest.config.ts** (Vue)：从'vitest/config'导入{defineConfig}；从 '@vitejs/plugin-vue' 导入 vue；导出默认的defineConfig({ 插件：[vue()]，测试：{ 全局变量：真实，环境：'happy-dom'， setupFiles: './src/test/setup.ts', }, }); ### Vue 组件测试从 'vitest' 导入 { 描述、它、期望 }；从 '@vue/test-utils' 导入 { mount } ；从 './Counter.vue' 导入计数器；描述('Counter.vue', () => { it('渲染初始计数', () => { const 包装器 = 安装（计数器，{ 道具：{初始计数：5}， }); Expect(wrapper.text()).toContain('计数：5'); }); it('按钮点击时增量', async () => { const 包装器 = 安装（计数器，{ 道具：{初始计数：0}， }); 等待wrapper.find('按钮').trigger('点击'); Expect(wrapper.text()).toContain('计数：1'); }); it('发出更新事件', async () => { const 包装器 = 安装（计数器，{ 道具：{初始计数：0}， }); 等待wrapper.find('按钮').trigger('点击'); 期望(wrapper.emited('更新')).toBeTruthy(); Expect(wrapper.emissed('update')?.[0]).toEqual([1]); }); }); ## 异步测试 ### 测试 Promise 从 'vitest' 导入 { 描述、它、期望 }；描述（'异步操作'，（）=> { it('解决承诺', async () => { const 结果 = 等待 Promise.resolve(42); 期望(结果).toBe(42); }); it('拒绝承诺', async () => { 等待期望（Promise.reject（new Error（'失败'）））.rejects.toThrow（'失败'）; }); it('使用解析匹配器', async () => { 等待期望（Promise.resolve（42））.resolves.toBe（42）; }); }); ### 测试异步函数从 'vitest' 导入 { 描述、it、期望、vi }；异步函数 fetchData(id: number): Promise { const 响应 =等待 fetch(`/api/data/${id}`); 返回response.json(); } 描述('异步函数', () => { it('获取数据成功', async () => { global.fetch = vi.fn(() => Promise.resolve({ json: () => Promise.resolve('data'), } 作为响应））； const data = 等待 fetchData(1); 期望(数据).toBe('数据'); Expect(fetch).toHaveBeenCalledWith('/api/data/1'); }); it('处理获取错误', async () => { global.fetch = vi.fn(() => Promise.reject(new Error('网络错误'))); 等待期望（fetchData（1））.rejects.toThrow（'网络错误'）; }); }); ## 快照测试 ### 基本快照从 'vitest' 导入 { 描述、它、期望 }；从'@testing-library/react'导入{渲染}；从 './UserCard' 导入 { UserCard }；描述('用户名片快照', () => { it('匹配快照', () => { const { 容器 } = 渲染( ）；期望（container.firstChild）.toMatchSnapshot（）; }); it('匹配内联快照', () => { const user = { id: 1, name: '鲍勃' }; 期望（用户）.toMatchInlineSnapshot（` { “id”：1， “姓名”：“鲍勃”， } `); }); }); ### 快照序列化器从 'vitest' 导入 { 描述、它、期望 }；期望.addSnapshotSerializer({ 测试： (val) => val && typeof val.toISOString === 'function', print: (val) => `Date(${(val as Date).toISOString()})`, }); 描述('自定义序列化器', () => { it('一致地序列化日期', () => { 常量数据 = { 时间戳：新日期（'2024-01-01T00:00:00.000Z'），用户：'爱丽丝'， }; 期望（数据）.toMatchSnapshot（）； }); }); ## 覆盖范围配置 ### 高级覆盖范围设置 **vitest.config.ts** ：从'vitest/config'导入{defineConfig}；导出默认的defineConfig({ 测试：{ 覆盖范围：{ 提供者：'v8'，记者：['text', 'json', 'html', 'lcov'], reportsDirectory: './coverage', 排除：[ '节点模块/', '距离/', '**/*.test.ts', '**/*.spec.ts', '**/*.config.ts', '**/类型/', ], 阈值：{ 线路：80，功能：80，分支机构：75个，陈述：80， }, all: true, // 在覆盖率报告中包含未经测试的文件 }, }, }); ### 运行覆盖范围 # 生成覆盖率 npx vitest 运行--覆盖率 # UI 覆盖 npx vitest --覆盖率 --ui # 具体阈值执行 npx vitest 运行 --coverage --coverage.lines=90 ## 从 Jest 迁移 ### API 兼容性 Vitest提供了兼容Jest的API： // Jest 语法适用于 Vitest 从 'vitest' 导入 { 描述、它、期望、玩笑 }； // 注意：新代码使用“vi”而不是“jest” 从 'vitest' 导入 { 描述、it、期望、vi }； // 两者都可以，但 vi 是首选 const mockFn = vi.fn(); // 首选 const mockFn2 = jest.fn(); // 也有效 ### 迁移清单 **1\.更新依赖项**： npm 卸载 jest @types/jest ts-jest npm install -D vitest @vitest/ui **2\.更新 package.json** ： { “脚本”：{ "test": "vitest run", // 是: jest "test:watch": "vitest" // 是：jest --watch } } **3\.将 jest.config.js 替换为 vitest.config.ts** ： // 旧的：jest.config.js 模块. 导出 = { 预设：'ts-jest'，测试环境：'节点'， }; // 新：vitest.config.ts 从'vitest/config'导入{defineConfig}；导出默认的defineConfig({ 测试：{ 全局变量：真实，环境：'节点'， }, }); **4\.更新测试文件**： // 改变导入 - 从'@jest/globals'导入{jest}； + 从 'vitest' 导入 { vi }； // 更新模拟 - 笑话.fn() + vi.fn() - jest.spyOn() + vi.spyOn() - 笑话.mock() + vi.mock() ## 高级模式 ### 并发测试从 'vitest' 导入 { 描述、它、期望 }； describe.concurrent('并行测试', () => { it('测试 1', async () => { 等待慢操作（）；期望（真）。toBe（真）； }); it('测试 2', async () => { 等待慢操作（）；期望（真）。toBe（真）； }); // 两个测试并行运行 }); ### 测试上下文导入 { 描述，它，期望，beforeEach } from 'vitest'; 接口测试上下文{ 用户：{ id：号码；名称：字符串}； api：API客户端； } 描述 ('With Context', () => { beforeEach((上下文) => { context.user = { id: 1, name: 'Alice' }; context.api = new ApiClient(); }); it('使用上下文', ({ user, api }) => { Expect(user.name).toBe('Alice'); 期望(api).toBeDefined(); }); }); ### 自定义匹配器从“vitest”导入{期望}；期望.扩展（{ toBeWithinRange(收到: 数字, 楼层: 数字, 天花板: 数字) { const pass = 收到 >= 下限 && 收到 <= 上限; 返回{ 通过，消息：() => 通过？ `预计 ${received} 不在 ${floor} - ${ceiling} 范围内` : `预计 ${received} 在 ${floor} - ${ceiling} 范围内`, }; }, }); // 用法期望(100).toBeWithinRange(90, 110); ## 最佳实践 1. **使用全局变量：true** \- 更简单的导入，Jest 兼容 2. **优先使用 vi 而不是 jest** \- 对新代码使用 Vitest-native API 3. **使用 v8 覆盖** \- 比伊斯坦布尔更快，与本机 ESM 配合使用 4. **隔离测试** \- 每个测试应该是独立的 5. **模拟外部依赖** \- 网络、文件系统、定时器 6. **使用 TypeScript** \- 测试中的完整类型安全 7. **在 CI 模式下运行测试** \- 对 CI 使用 `vitest run`，而不是监视模式 8. **利用 UI 模式** \- 直观地调试失败的测试 9. **使用describe.concurrent** \- 并行化独立测试 10. **保持测试集中** \- 尽可能每个测试一个断言 ## 常见陷阱 ❌ **不在 CI/CD 中使用 CI 模式** : // 错误 - CI 中的监视模式挂起 “测试”：“维斯特” // 正确 - 单次运行 “测试”：“维斯特运行” ✅ **正确的做法**： { “脚本”：{ "test": "vitest run", // CI 安全 "test:watch": "vitest", // 开发 "test:ui": "vitest --ui" // 调试 } } ❌ **忘记等待异步测试**： // 错误 - 断言之前测试通过 it('获取数据', () => { fetchData().then(数据 => { 期望（数据）.toBeDefined（）； // 从不运行！ }); }); // 正确 it('获取数据', async () => { const data = 等待 fetchData(); 期望（数据）.toBeDefined（）； }); ❌ **不清理模拟**： // 错误 - 测试之间模拟泄漏 it('测试 1', () => { vi.spyOn(控制台, '日志'); // 没有清理！ }); // 正确从 'vitest' 导入 { afterEach }；每个之后（（）=> { vi.restoreAllMocks(); }); ❌ **使用错误的环境** : // 错误 - 在节点环境中测试 DOM 测试：{ environment: 'node', // 无法测试 React 组件！ } // 正确测试：{ environment: 'jsdom', // 对于 React/Vue 组件 } ## 资源 * **文档**： * **API 参考** : * **迁移指南**： * **示例** : * **UI 模式** : ## 相关技能使用 Vitest 时，请考虑以下补充技能： * **typescript-core** ：高级 TypeScript 类型模式、tsconfig 和运行时验证 * **react** ：通过测试库集成进行 React 组件测试 * **测试驱动开发**：完整的 TDD 工作流程（红色/绿色/重构周期） ### 快速 TypeScript 类型模式（内联以供独立使用） // 具有泛型的类型安全测试工厂函数 createMockData>( 默认值：T，覆盖？：部分 ): T { 返回 { ...默认值，...覆盖 }; } 常量模拟用户 = createMockData( { id: 1, 姓名: '测试', 电子邮件: 'test@example.com' }, {名称：'爱丽丝'} ）； // 在测试中使用 Zod 进行运行时验证从 'zod' 导入 { z }； const UserSchema = z.object({ id: z.number(), 名称： z.string(), 电子邮件：z.string().email(), }); test('API 返回有效用户', async () => { const 响应 =等待 fetch('/api/user/1'); const data =等待response.json(); // 运行时验证+类型推断 const user = UserSchema.parse(data); 期望(user.email).toContain('@'); }); // 用于字面推断的常量类型参数 const createTestConfig = >(config: T): T => config; const testEnv = createTestConfig({ mode: 'test', debug: false }); // 类型：{ 模式：“测试”； debug: false } （保留文字） ### 快速反应测试模式（内联供独立使用） // 使用 Vitest 来响应测试库从 '@testing-library/react' 导入 { render, screen, fireEvent, waitFor }; 从'@testing-library/user-event'导入{userEvent}；从 'vitest' 导入 { 描述、测试、期望、vi }； // 组件测试描述('用户资料', () => { test('渲染用户信息', () => { const user = { id: 1, 姓名: 'Alice', 电子邮件: 'alice@example.com' }; 渲染(); Expect(screen.getByText('Alice')).toBeInTheDocument(); Expect(screen.getByText('alice@example.com')).toBeInTheDocument(); }); test('处理表单提交', async () => { const onSubmit = vi.fn(); 渲染(); const user = userEvent.setup(); 等待 user.type(screen.getByLabelText('姓名'), '鲍勃'); 等待 user.click(screen.getByRole('button', { name: '提交' })); 等待 waitFor(() => { Expect(onSubmit).toHaveBeenCalledWith({ name: 'Bob' }); }); }); }); // 钩子测试从 '@testing-library/react' 导入 { renderHook, act }; test('useCounter 钩子增量', () => { const { 结果 } = renderHook(() => useCounter(0)); 期望(结果.当前.计数).toBe(0); 行动（（）=> { result.current.increment(); }); 期望(结果.当前.计数).toBe(1); }); ### 快速 TDD 工作流程参考（内联供独立使用） **红色→绿色→重构周期：** 1. **红色阶段：写入失败测试** test('应该使用有效凭据对用户进行身份验证', () => { const user = { 用户名: 'alice', 密码: 'secret123' }; const 结果 = 验证（用户）；期望（结果。isAuthenticated）。toBe（true）; // 失败是因为authenticate()还不存在 }); 2. **绿色阶段：让它通过** 函数验证（用户：用户）：AuthResult { // 通过测试的最少代码 if (user.username === 'alice' && user.password === 'secret123') { 返回 { isAuthenticated: true }; } 返回 { isAuthenticated: false }; } 3. **重构阶段：改进代码** 函数验证（用户：用户）：AuthResult { // 清理同时保持测试绿色 const hashed = hashPassword(用户.密码); conststoredUser=database.getUser(user.username); 返回{ isAuthenticated：storedUser？.passwordHash ===散列 }; } **测试结构：安排-执行-断言 (AAA)** test('创建用户成功', async () => { //排列：设置测试数据 const userData = { 用户名: 'alice', 电子邮件: 'alice@example.com' }; // Act：执行操作 const 用户 = 等待 createUser(userData); // 断言：验证结果 Expect(user.username).toBe('alice'); 期望(user.email).toBe('alice@example.com'); }); **Vitest 特定的 TDD 功能：** // 带 HMR 的观看模式（即时反馈） // 维斯特--手表 // 用于可视化调试的UI模式 // 访问--ui // 只运行改变的测试 // vitest --更改 // 性能测试的Benchmark模式从 'vitest' 导入 { bench }; bench('验证性能', () => { 验证（{ 用户名：'alice'，密码：'秘密' }）； }); [如果一起部署，则各自的技能中可以使用完整的 TypeScript、React 和 TDD 工作流程] ## 总结 * **Vitest** 是 TypeScript 测试的现代标准 * **通过 Vite 原生 HMR 比 Jest 快 10-100 倍** * **ESM-first** 具有本机模块支持 * **兼容 Jest** API，方便迁移 * **TypeScript-first** 具有内置类型支持 * **React 和 Vue 的组件测试** * **v8 覆盖** 比伊斯坦布尔更快 * **UI模式** 用于可视化测试调试 * **完美适用于**：现代 TypeScript 项目、基于 Vite 的应用程序、React/Vue 组件

齿轮

包含技能