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

一、我们要做什么？

1. 写一个 Vue3 计数器组件（显示名字 + 点按钮数字+1）
2. 写 Vitest 自动化测试（让电脑自动验证功能是否正确）
3. 全程不用弹浏览器，在终端就能看到测试结果 ✅

---

二、准备工作（只需要 1 个软件）

安装 Node.js （一路下一步）

https://nodejs.org/

安装完打开 VS Code 终端，输入检查：

node -v
npm -v

出现版本号 = 成功！

---

三、第一步：创建项目

1. 新建文件夹

名字叫：vue-vitest-demo

2. VS Code 打开文件夹

文件 → 打开文件夹 → 选择你创建的文件夹

3. 打开终端

顶部 → 查看 → 终端

4. 初始化项目

npm init -y

执行完会生成 package.json（项目配置文件）

---

四、第二步：安装所有依赖（直接复制运行）

运行这条命令，安装所有需要的工具

npm install -D vitest @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 lang="ts">
// 导入Vue响应式功能
import { ref } from 'vue'

// 定义组件接收的参数：必须传name，是字符串
defineProps<{
  name: string
}>()

// 定义响应式数字count，默认值1
const count = ref(1)
</script>

<template>
  <div>
    <!-- 展示名字和计数器 -->
    <h1>Hello {{ name }} x{{ count }}!</h1>
    <!-- 点击按钮，count+1 -->
    <button @click="count++">Increment</button>
  </div>
</template>

---

2. src/HelloWorld.spec.ts（测试文件）

import { expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

test('renders name and the counter', async () => {
  // 挂载组件，传入 name 属性
  const wrapper = mount(HelloWorld, {
    props: { name: 'Vitest' },
  })

  // 检查页面是否显示 Hello Vitest
  expect(wrapper.text()).toContain('Hello Vitest')

  // 模拟点击按钮
  await wrapper.find('button').trigger('click')

  // 检查点击后数字变成 2
  expect(wrapper.text()).toContain('2')
})

---

3. vitest.config.ts（测试配置）

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
  },
})

---

4. tsconfig.json（TypeScript 配置）

{
  "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 文件）

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

---

6. package.json（添加测试命令）

找到 "scripts"，改成：

"scripts": {
  "test": "vitest"
}

---

七、第五步：运行测试！见证成功

在终端输入：

npm run test

你会看到：

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!
• 点击按钮数字 +1

2. HelloWorld.spec.ts

写了一个自动测试脚本：

• 自动加载组件
• 自动检查文字是否正确
• 自动点击按钮
• 自动检查数字是否变成 2

3. 配置文件

让 TypeScript + Vitest + Vue 能一起工作。

4. 运行测试

电脑自动帮你测试功能，不用你手动点页面！

---

---

九、常见问题

2. TS 报红？

• 检查 vue.shim.d.ts 是否创建
• 检查 tsconfig.json 是否正确

3. 命令报错？

• 重新运行安装命令：

npm install

ps: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/

---