Vue单元测试与组件测试 · 从零搭建课程目录

01

测试基础认知 📖 概念

为什么需要单元测试 TDD / BDD Vue测试生态

02

环境搭建准备 ⚙️ 配置

Node.js 版本 npm/yarn/pnpm 创建Vue3项目

03

Vitest 初体验 ⚡ 上手

安装Vitest 第一个测试用例运行与查看

04

Jest vs Vitest ⚖️ 对比

两者对比迁移成本为什么选Vitest

05

测试文件组织 📁 规范

目录结构命名约定源文件映射

06

describe 与 it 🧩 套件

测试套件/用例嵌套作用域生命周期钩子

07

断言基础 ✅ expect

toBe / toEqual toBeTruthy toBeFalsy

08

数字与字符串断言 🔢 匹配

toBeGreaterThan toMatch toContain

09

异常与错误测试 ⚠️ 边界

toThrow 异步错误捕获边界情况

10

异步测试 ⏳ 异步

回调 / Promise async/await 超时设置

11

Mock 函数入门 🎭 jest.fn()

模拟返回值模拟实现调用信息

12

Mock 模块 📦 jest.mock()

模拟第三方库部分模拟模块工厂

13

Spy 监听 👀 spyOn

追踪调用调用信息恢复原始实现

14

Timer 模拟 ⏱️ 假定时器

useFakeTimers setTimeout setInterval

15

Vue Test Utils 介绍 🧪 VTU

安装与配置核心API 渲染组件

16

组件挂载 🔩 mount

mount vs shallowMount 挂载选项实例访问

17

DOM 查询 🔍 find / get

find / findAll get / getAll querySelector风格

18

事件触发 ⚡ trigger

原生/自定义事件事件参数传递 trigger方法

19

Props 测试 📤 属性

传递props 验证渲染 props更新响应

20

Slots 测试 🧩 插槽

默认插槽具名插槽作用域插槽

21

表单交互 📝 v-model

输入框 / 复选框下拉选择 v-model测试

22

计算属性测试 🧮 computed

直接测试计算属性渲染结果验证

23

Watcher 测试 👁️ watch

触发watcher 验证副作用异步watcher

24

Vuex 状态管理测试 🗃️ Vuex

模拟store 组件与store交互模块化store

25

Pinia 状态管理测试 🍍 Pinia

创建Pinia实例 actions/getters 组件集成测试

26

Vue Router 测试 🧭 路由

模拟路由导航守卫路由参数测试

27

异步组件测试 ⏳ Suspense

Suspense defineAsyncComponent 加载状态测试

28

自定义指令测试 ⚙️ 指令

指令生命周期绑定值测试更新测试

29

组合式函数测试 🪝 composables

独立测试组件内测试 provide/inject模拟

30

持续集成与覆盖率 📈 CI

配置CI流水线覆盖率报告阈值与质量门禁