vue 单元测试从入门到实战

Pinia 是 Vue.js 的另一个状态管理库，可以看作是 Vuex 的现代化替代品。它由 Vue.js 核心团队成员开发，旨在提供更简单、更灵活的状态管理方案。Pinia 的设计理念更加贴合 Vu

Vuex 是 Vue.js 生态中非常重要的状态管理工具，特别适合中大型应用。它通过集中式管理状态，使得应用的状态变化更加清晰和可控。 测试 vuex 方式也是分两种 真实使用 vuex store

我们知道，lodash 是一个非常完善的 js 工具库，它的测试用例也十分完善，但这个库是 jest 和 chai 编写的，我使用 vitest 带着大家过一遍部分源码，从中学习和加强自己前面所学的知

Vue Router 是一个 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用变得更加轻松。在单页面应用中，页面的切换是由前端来控制的，Vue Router 允许你通

测试浏览器相关的 api 需要配置 vitest 为 jsdom 的环境，我们项目已经配置好了，如果不配置或者是 node.js 环境，是不能调用浏览器平台级的 api 测试 LocalStorage

在进行前端单元测试时，模拟时间是一项常用技术，特别是当我们的代码逻辑涉及到日期和时间的操作。Vitest 提供了一组强大的 API 来让我们可以在测试中控制和模拟时间，确保我们的测试可以在任何时刻准确

开篇先提一个问题，什么是 mock？，各位先想想。 前一章节，我们详细了介绍了 vue 单元测试所用到的一些测试方法，但每一个测试 case,最终都会渲染出来真实的组件，再依据真实组件去做断言。 在单

前置知识 观念改变 在这一章，会讲到如何测试组件，我在这一章只讲组件测试的基本操作，不会去讲测试的心法，后面章节再专门讲测试的心法，我会带着大家，把复杂的业务点，拆成一个一个细点，让大家先把测试用例写

组件基本测试 前置知识 前面几章讲的都是 JS 函数的测试，接下来我们要开始测试 vue 组件了，vue 组件的测试需要依赖另一个库 @vue/test-utils,这个库我们之前装过了，如果没安装可

断言常用方法 断言常用方法 断言最核心的就是 expect 和后面的 toXXX ，我们在前一章看过最简单的toBe 语法，随着更多的数据结构出现，vitest 根据 JS 不同的数据结构类型，有不同

vitest 用法概览 测试文件结构 写单元测试从结构上来说主要分两部分，test Suite（describe） 和 test case(it)。简单理解 suite 类比前端的模块 module，

搭建 vitest 环境 假设我们没有写过 vue 的单元测试，我们初始化一个全新的项目，只要在初始化 vue 项目的时候，使用 vue 自带的脚手架命令，就可以自动安装好一整套的测试环境，vites

为什么需要前端测试 引言： 在软件开发过程中，保证代码的质量和稳定性是至关重要的。而单元测试作为一种有效的测试手段，可以帮助开发团队提高代码的一致性、可维护性和发布效率。之前我的文章2023 年前端工