vitest的使用(一)

什么是Vitest

1. 由Vite驱动的下一代测试框架，可以与vite共用一个文件
2. 由于Jest的大规模使用有与Jest相兼容的API
3. Vite项目的首选测试框架和非Vite项目测试框架的可靠替代方案
4. 使用Worker线程并发运行，具有良好的性能

总之，vitest是一个用vite驱动的下一代测试框架，具有实用的api和多线程运行的良好性能，逐渐成为Vite项目的首先测试框架，非vite项目测试框架的可靠替代方案

vitest官方文档

为什么要写测试

1. 提高开发效率
   • 更高阶的调试手法
   • 验证局部逻辑一步到位
2. 对修改代码更加自信
   • 重构代码
   • 新增功能
3. 减少重复工作

实现功能的流程和逻辑

1. 写代码→调试/验证
2. 调试/验证→写代码

单元测试就是代替手动调试/验证的过程，减少重复的调试/验证的时间

写好单元测试后，可以一步到位验证局部逻辑，不用重复研究调用逻辑调试

单元测试对日常开发的作用

1. 新增功能&修改bug
   • 验证老功能有没有问题
   • 提高自信心，出现问题可以及时发现
   • 项目更加专业
2. 重构 改善代码
   • 当重构代码时，减少修bug的时间
   • 改善代码时，可以及时验证
   • 保持项目代码质量
3. check别人提交的代码
   • 提pr的时候保障没有破坏性更新
   • 只有所有单元测试通过才能合并

搭建Vitest环境

新项目中使用

1. 使用vue-cli构建一个新项目

   pnpm create vue@next

2. 启动单元测试用例

   pnpm test:unit

老项目中使用

1. 安装vitest

   pnpm add vitest -D

2. 在package.json中添加test命令

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

3. 编写测试用例

   • 一般以.test.(ts|tsx|js|jsx)、.spec.(ts|tsx|js|jsx)结尾

   // sum.js
   export function sum(a,b){
       return a+b
   }

   // sum.test.js
   import { expect, test } from 'vitest'
   import { sum } from './sum'
   
   test('adds 1+2 to equal 3', () => {
     expect(sum(1, 2)).toBe(3)
   })

4. 启动单元测试

   pnpm test