Vue3 + Vitest 浏览器测试 从零开发指南

一、我们要做什么写一个Vue3 计数器组件显示名字 点按钮数字1写Vitest 自动化测试让电脑自动验证功能是否正确全程不用弹浏览器在终端就能看到测试结果 ✅二、准备工作只需要 1 个软件安装Node.js一路下一步https://nodejs.org/安装完打开VS Code终端输入检查node-vnpm-v出现版本号 成功三、第一步创建项目1. 新建文件夹名字叫vue-vitest-demo2. VS Code 打开文件夹文件 → 打开文件夹 → 选择你创建的文件夹3. 打开终端顶部 → 查看 → 终端4. 初始化项目npminit-y执行完会生成package.json项目配置文件四、第二步安装所有依赖直接复制运行运行这条命令安装所有需要的工具npminstall-Dvitest vue/test-utils jsdom vitejs/plugin-vue typescript vue安装完成后你的package.json里会出现这些依赖。五、第三步创建项目文件结构你的项目必须长成下面这样不能错vue-vitest-demo/ ├─ src/ │ └─ HelloWorld.vue (组件) │ └─ HelloWorld.spec.ts (测试文件) ├─ vitest.config.ts (测试配置) ├─ tsconfig.json (TS配置) ├─ vue.shim.d.ts (TS识别Vue) └─ package.json六、第四步复制代码全部给你准备好了1. src/HelloWorld.vue组件script setup langts // 导入Vue响应式功能 import { ref } from vue // 定义组件接收的参数必须传name是字符串 defineProps{ name: string }() // 定义响应式数字count默认值1 const count ref(1) /script template div !-- 展示名字和计数器 -- h1Hello {{ name }} x{{ count }}!/h1 !-- 点击按钮count1 -- button clickcountIncrement/button /div /template2. src/HelloWorld.spec.ts测试文件import{expect,test}fromvitestimport{mount}fromvue/test-utilsimportHelloWorldfrom./HelloWorld.vuetest(renders name and the counter,async(){// 挂载组件传入 name 属性constwrappermount(HelloWorld,{props:{name:Vitest},})// 检查页面是否显示 Hello Vitestexpect(wrapper.text()).toContain(Hello Vitest)// 模拟点击按钮awaitwrapper.find(button).trigger(click)// 检查点击后数字变成 2expect(wrapper.text()).toContain(2)})3. vitest.config.ts测试配置import{defineConfig}fromvitest/configimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],test:{environment:jsdom,},})4. tsconfig.jsonTypeScript 配置{compilerOptions:{target:ESNext,lib:[esnext,dom],module:ESNext,moduleResolution:Bundler,strict:true,declaration:true,noEmit:true,esModuleInterop:true,skipLibCheck:true}}5. vue.shim.d.ts让 TS 认识 Vue 文件declaremodule*.vue{importtype{DefineComponent}fromvue;constcomponent:DefineComponent{},{},any;exportdefaultcomponent;}6. package.json添加测试命令找到scripts改成scripts:{test:vitest}七、第五步运行测试见证成功在终端输入npmruntest你会看到RERUN src/HelloWorld.spec.ts x1 ✓ src/HelloWorld.spec.ts (1 test) 26ms ✓ renders name and the counter 25ms Test Files 1 passed Tests 1 passed✅全部跑通八、每一步我们干了什么1. HelloWorld.vue写了一个页面组件接收名字name显示Hello xxx x1!点击按钮数字 12. HelloWorld.spec.ts写了一个自动测试脚本自动加载组件自动检查文字是否正确自动点击按钮自动检查数字是否变成 23. 配置文件让TypeScript Vitest Vue能一起工作。4. 运行测试电脑自动帮你测试功能不用你手动点页面九、常见问题2. TS 报红检查vue.shim.d.ts是否创建检查tsconfig.json是否正确3. 命令报错重新运行安装命令npminstallps:https://cn.vitest.dev/ https://github.com/vitest-tests https://changweihua.github.io/zh-CN/blog/2025-09/vue-vitest.html https://betterstack.com/community/guides/testing/vitest-explained/