vitest测试框架快速入门

xfq
19 阅读3分钟

一、vitest测试框架

参考文章：mp.weixin.qq.com/s/AuRfpqE72…

不管项目的打包工具是webpack还是vite，都可以使用vitest

vitest语法上和jest兼容，并且在源码内联测试这块更加方便

二、测试的意义

  1. 保证函数的原子正确性，以缩小调试的排查范围
  2. 反馈循环更小，改了代码直接就能测试验证
  3. AI生成代码时代，更要写测试，保证产出代码质量的稳定性

注意：不要为了测试而测试，只给重要的复杂的函数写测试

三、安装配置运行

安装：npm install -D vitest

手动运行：npx [run] vitest [具体文件路径]

在package的script增加命令："scripts": { "test": "vitest" }

在tsconfig的compilerOptions增加类型包："types": [ "vitest/importMeta"]

在根目录增加配置文件：vitest.config.ts

注意：如果使用vite，vitest会自动读取vite配置，两者统一在vite.config.ts中维护，不需要也不建议再单独创建vitest配置文件！

import path from 'node:path'
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        // 必须和项目别名保持一致
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    test: {
        // 源码内联测试
        includeSource: ['src/**/*.{js,ts}'],
        // 补充DOM环境
        environment: 'jsdom',
    },
})

如果使用源码内联测试，还需要在打包时将import.meta.vitest替换为undefined，防止测试代码被打进生产包中占用体积（可以用金丝雀字符串法验证）：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    'import.meta.vitest': 'undefined',
  },
})
// webpack.config.js
const webpack = require('webpack')
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'import.meta.vitest': 'undefined',
    })
  ],
}

四、写测试的方式

有两种方式：

  1. 在要测试的文件外创建tests目录，里面存放很多的“函数名.test.ts”
  2. 源码内联测试：在要测试的函数底下直接写测试代码

总结：方式1是比较标准的写法，适合于有大量测试时；方式2顺手就写，非常方便，测试代码本身还可以作为函数的使用说明。建议开发首先使用方式2，等测试代码过多时，再改成方式1

源码内联测试写法：

// #region in-source test suites
if (import.meta.vitest) {
  const { describe, it, expect } = import.meta.vitest
  ...
}
// #endregion

五、常用测试函数

describe('分组描述', fn)：对测试用例进行分组，更易读

it('测试用例描述', fn)：定义一个具体的测试用例

expect(value)：断言，验证结果是否符合预期，后面跟着匹配器（toBe、toEqual等）

.not：取反，放在匹配器前面

toBe(value)：严格相等，适用于基本数据类型

toEqual(value)：深度相等，适用于对象、数组

toMatchObject(subset)：比toEqual更宽松，只要指定的属性相等就行

toContain(value)：数组和字符串是否包含value

toBeTruthy()：判断是否为真值

toBeDefined()：判断是否定义

六、利用AI生成测试用例

使用vitest给重要的、复杂的函数生成测试用例，要求：

  1. 使用源码内联测试方式（In-source testing），直接在对应函数的下面写测试用例，原函数代码不做修改
  2. 测试需覆盖正常路径（Happy Path）、边界情况（Edge Cases）以及异常处理（Error Handling）
最后，如果文章对你有帮助，点个赞吧（260125）
avatar
文章
阅读
粉丝