[{"data":1,"prerenderedAt":300},["ShallowReactive",2],{"page-\u002Fvue\u002Fvitest":3},{"id":4,"title":5,"body":6,"description":292,"extension":293,"meta":294,"navigation":295,"path":296,"seo":297,"stem":298,"__hash__":299},"content\u002FVue\u002Fvitest.md","Vitest",{"type":7,"value":8,"toc":285},"minimark",[9,27,32,107,111,116,119,129,132,138,145,156,162,166,173,179,183,186,192,202,206,209,246,249,255,259],[10,11,12,15,16,19,20,23,24],"p",{},[13,14,5],"strong",{}," 是一个现代的 JavaScript\u002FTypeScript 测试框架，它是基于 ",[13,17,18],{},"Vite"," 构建的，专为现代前端开发而设计。Vitest 目标是提供快速、可靠的测试工具，特别适用于使用 Vite 构建的应用程序。Vitest 兼容 Jest 的大多数 API，",[13,21,22],{},"并且集成了 Vite 的构建工具","，因此具有",[13,25,26],{},"非常快的启动和测试执行速度。",[28,29,31],"h3",{"id":30},"vitest-的主要特点","Vitest 的主要特点：",[33,34,35,42,57,74,89,95,101],"ol",{},[36,37,38,41],"li",{},[13,39,40],{},"快速的执行速度","： 由于 Vitest 是基于 Vite 的，它具有超快的启动和热更新速度。Vite 本身使用了现代构建工具（如 ESBuild）来加速打包和构建，因此 Vitest 在执行测试时非常高效。",[36,43,44,47,48,52,53,56],{},[13,45,46],{},"支持 TypeScript","： Vitest 支持 TypeScript 测试文件，可以直接运行 ",[49,50,51],"code",{},".ts"," 或 ",[49,54,55],{},".tsx"," 文件，无需额外的配置。",[36,58,59,62,63,66,67,66,70,73],{},[13,60,61],{},"兼容 Jest API","： Vitest 提供了与 Jest 类似的 API，使得从 Jest 迁移过来的开发者几乎无需重新学习测试语法。比如，",[49,64,65],{},"describe","、",[49,68,69],{},"it",[49,71,72],{},"expect"," 等语法都和 Jest 一样。",[36,75,76,79,80,66,82,66,85,88],{},[13,77,78],{},"内置的断言库","： Vitest 内置了断言库，因此无需额外安装任何第三方库。它默认支持常用的断言，如 ",[49,81,72],{},[49,83,84],{},"toBe",[49,86,87],{},"toEqual"," 等。",[36,90,91,94],{},[13,92,93],{},"易于集成","： Vitest 可以与 Vite 项目无缝集成，同时也支持其他工具和框架的配置，比如 Vue、React 等。它提供了自动化的配置和插件支持。",[36,96,97,100],{},[13,98,99],{},"模拟（Mocking）支持","： Vitest 提供了强大的模拟功能，可以模拟函数、模块等行为，方便测试时控制依赖的行为。",[36,102,103,106],{},[13,104,105],{},"集成测试与单元测试","： Vitest 可以用于进行单元测试、集成测试，甚至端到端的测试，支持异步操作、并发执行等多种复杂场景。",[28,108,110],{"id":109},"vitest-安装和使用示例","Vitest 安装和使用示例：",[112,113,115],"h4",{"id":114},"_1-安装-vitest","1. 安装 Vitest",[10,117,118],{},"你可以通过 npm 或 yarn 安装 Vitest。",[120,121,126],"pre",{"className":122,"code":124,"language":125},[123],"language-text","npm install --save-dev vitest\n","text",[49,127,124],{"__ignoreMap":128},"",[10,130,131],{},"或者使用 yarn：",[120,133,136],{"className":134,"code":135,"language":125},[123],"yarn add --dev vitest\n",[49,137,135],{"__ignoreMap":128},[112,139,141,142],{"id":140},"_2-配置-vitest","2. 配置 ",[49,143,144],{},"vitest",[10,146,147,148,151,152,155],{},"在 ",[49,149,150],{},"package.json"," 中",[13,153,154],{},"添加测试脚本","来运行 Vitest：",[120,157,160],{"className":158,"code":159,"language":125},[123],"{\n  \"scripts\": {\n    \"test\": \"vitest\"\n  }\n}\n",[49,161,159],{"__ignoreMap":128},[112,163,165],{"id":164},"_3-编写测试文件","3. 编写测试文件",[10,167,168,169,172],{},"Vitest 支持编写简单的测试文件。例如，创建一个名为 ",[49,170,171],{},"sum.test.ts"," 的文件，内容如下：",[120,174,177],{"className":175,"code":176,"language":125},[123],"\u002F\u002F sum.ts\nexport function sum(a: number, b: number): number {\n  return a + b;\n}\n\n\u002F\u002F sum.test.ts\nimport { sum } from '.\u002Fsum';\n\ndescribe('sum', () => {\n  it('should add two numbers correctly', () => {\n    expect(sum(1, 2)).toBe(3);\n  });\n\n  it('should handle negative numbers', () => {\n    expect(sum(-1, 2)).toBe(1);\n  });\n});\n",[49,178,176],{"__ignoreMap":128},[112,180,182],{"id":181},"_4-运行测试","4. 运行测试",[10,184,185],{},"通过下面的命令运行测试：",[120,187,190],{"className":188,"code":189,"language":125},[123],"npm run test\n",[49,191,189],{"__ignoreMap":128},[10,193,194,195,52,198,201],{},"Vitest 会自动运行所有匹配 ",[49,196,197],{},".test.ts",[49,199,200],{},".spec.ts"," 后缀的文件，执行测试并显示结果。",[112,203,205],{"id":204},"_5-支持的-api-和功能","5. 支持的 API 和功能",[10,207,208],{},"Vitest 提供了类似于 Jest 的 API，例如：",[210,211,212,217,222,227,237],"ul",{},[36,213,214,216],{},[49,215,65],{},"：组织测试用例。",[36,218,219,221],{},[49,220,69],{},"：定义具体的测试。",[36,223,224,226],{},[49,225,72],{},"：定义断言。",[36,228,229,232,233,236],{},[49,230,231],{},"beforeAll"," \u002F ",[49,234,235],{},"beforeEach","：在每个测试开始前运行的钩子。",[36,238,239,232,242,245],{},[49,240,241],{},"afterAll",[49,243,244],{},"afterEach","：在每个测试结束后运行的钩子。",[10,247,248],{},"例如：",[120,250,253],{"className":251,"code":252,"language":125},[123],"describe('MyComponent', () => {\n  it('should render correctly', () => {\n    const result = renderMyComponent();\n    expect(result).toMatchSnapshot();\n  });\n});\n",[49,254,252],{"__ignoreMap":128},[28,256,258],{"id":257},"适合使用-vitest-的场景","适合使用 Vitest 的场景：",[210,260,261,267,273,279],{},[36,262,263,266],{},[13,264,265],{},"Vite 项目","：如果你的项目已经在使用 Vite 构建工具，Vitest 可以无缝集成，利用 Vite 的速度和优化。",[36,268,269,272],{},[13,270,271],{},"TypeScript 项目","：Vitest 直接支持 TypeScript，无需额外配置。",[36,274,275,278],{},[13,276,277],{},"快速的测试执行","：如果你希望测试快速反馈，Vitest 的速度优势会非常明显。",[36,280,281,284],{},[13,282,283],{},"现代前端框架","：适用于 Vue 3、React、Svelte 等现代前端框架的测试。",{"title":128,"searchDepth":286,"depth":286,"links":287},2,[288,290,291],{"id":30,"depth":289,"text":31},3,{"id":109,"depth":289,"text":110},{"id":257,"depth":289,"text":258},"Vitest 是一个现代的 JavaScript\u002FTypeScript 测试框架，它是基于 Vite 构建的，专为现代前端开发而设计。Vitest 目标是提供快速、可靠的测试工具，特别适用于使用 Vite 构建的应用程序。Vitest 兼容 Jest 的大多数 API，并且集成了 Vite 的构建工具，因此具有非常快的启动和测试执行速度。","md",{},true,"\u002Fvue\u002Fvitest",{"description":292},"Vue\u002Fvitest","rWTqFMhxxqLzFawUVnRnbpMYjNAPamtrd0SGb-PiwtI",1791042468167]