乘风gg

早在 Vue3.3 版本开始，Vue3 开始支持泛型组件。可笔者在写这篇文章的时候，依然发现一些群友在 Vue3 的项目中还没有用上，于是今天出一篇文章，和大家一起交流。 ...

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

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

很多新手刚开始学单元测试，就是因为不懂得如何断点或者调试，导致写的测试用例经常报错，然后放弃了，包括我刚学那会也放弃过。说实话，我应该早点写这一篇文章，拯救大家于水深火热中...

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

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

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

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

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

日常开发，我们脱离不了事件，当我们遇到元素的 click, check 等事件的时候，是怎么测试的呢？ 普通事件 在 vue 测试中，核心的 api 是 wrapper 提...

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

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

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

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

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

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