Skip to content

单元测试

单元测试的重要性

  • 保证研发质量
  • 提高项目的稳定性
  • 提高开发速度

Vue单元测试

vue官网文档:https://cn.vuejs.org/guide/scaling-up/testing.html#unit-testing

单元测试通常适用于独立的业务逻辑、组件、类、模块或函数,不涉及 UI 渲染、网络请求或其他环境问题

这些通常是与 Vue 无关的纯 JavaScript/TypeScript 模块。

一般来说,在 Vue 应用中为业务逻辑编写单元测试与使用其他框架的应用没有明显区别。

但有两种情况,你必须对 Vue 的特定功能进行单元测试:

1.组合式函数

2.组件

单元测试方案

推荐方案

Vitest:https://vitest.dev/

因为由 create-vue 创建的官方项目配置是基于 Vite 的,所以我们推荐你使用一个可以利用同一套 Vite 配置和转换管道的单元测试框架。Vitest 正是一个针对此目标设计的单元测试框架,它由 Vue / Vite 团队成员开发和维护。在 Vite 的项目集成它会非常简单,而且速度非常快。

其他选择

Peeky:https://peeky.dev/

是另一速度极快的单元测试运行器,对 Vite 集成提供第一优先级支持。它也是由 Vue 核心团队成员创建的,并提供了一个基于图形用户界面(GUI)的测试界面。

Jest:https://jestjs.io/

是一个广受欢迎的单元测试框架,并可通过 vite-jest 这个包在 Vite 中使用。不过,我们只推荐你在已有一套 Jest 测试配置、且需要迁移到基于 Vite 的项目时使用它,因为 Vitest 提供了更无缝的集成和更好的性能。

  • mocha
  • @vue/test-utils
  • sinon

单元测试步骤

1.安装好相关单元测试库后,在vue项目中新建目录:tests/unit

2.创建以.spec.js结尾的测试文件:文件命名可以根据相关 业务逻辑、组件、类、模块或函数 等名字的 相同命名

3.开始写单元测试测试套件代码

import 导入需要单元测试的相关函数或组件...

导入测试库的函数

查看相关文档开始编写测试用例

React 单元测试

Released under the MIT License.