跳到主要内容

Vitest

  • 由 Vite 提供支持的极速单元测试框架
  • Vitest已经成为单元测试的趋势，很多从Jest迁移到Vitest了
  • Vitest 与 Jest 兼容，具有开箱即用的 ESM、Typescript 和 JSX 支持，并且由 esbuild 提供支持
  • Vitest 非常注重性能，使用 Worker 线程进行并发运行，Vitest 默认启动多线程
  • 可以和vite共享vite.config.js配置文件
  • 具备文件监听模式，可以说是 测试的热更新

为什么不用jest​

  • jest配置太过复杂，学习成本高

  • 如果不熟悉的，配置个测试环境可能需要半天

  • 在vitest中，开箱即用，直接就支持ts、esm不需要配置

配置​

  • vitest会读取vite.config.ts和vitest.config.ts配置文件

    • vitest.config.ts，优先级将会最高。

  • 要配置 vitest 本身，请在你的 Vite 配置中添加 test 属性

  • 需要使用ts的三斜杠指令添加对Vitest的类型的引用

  • scripts脚本配置test:vitest

    • 启动vitest之后，自动监听了文件模式，相当于测试的热更新了

常用语法​

test​

  • 定义测试期望的方法

expect​

  • 用来创建断言，判断实际运行的结果是否符合我们预期的结果

expect函数，顾名思义期望的意思。既然是对已有代码进行测试，其实就是把实际运行的结果与我们期望的结果进行比较，如果一致，就说明测试通过

toBe​

  • toBe 可用于断言基础对象是否相等，或者对象是否共享相同的引用

vi​

  • 提供工具函数来帮助

  • 主要用于模拟各种变量或其他环境

测试工具库​

参考：vitest例子

vue:

react:

查看测试覆盖率​

  • 可以执行pnpm run coverage来查看我们测试的覆盖情况
json
{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

测试覆盖率它们的含义分别是

  • %stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？
  • %Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？
  • %Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？
  • %Lines行覆盖率（line coverage）：是不是每一行都执行了？

vue例子​

  • 要安装Vue测试库@vue/test-utils
bash
pnpm add @vue/test-utils -D

  • button.test.ts

    • 当我们默认插槽为"Hello world"时，期望这个组件的text包含"Hello world"

    • 当我们传入的组件的type为primary，期望渲染出的组件包含'k-button--primary'的类名

ts
import { describe, expect, it } from "vitest";

import { mount } from '@vue/test-utils'
import button from '../button.vue'

describe('test Button', () => {
    it("should render slot", () => {
        const wrapper = mount(button, {
            slots: {
                default: 'Hello world'
            }
        })

        // Assert the rendered text of the component
        expect(wrapper.text()).toContain('Hello world')
    })
    it("should have class", () => {
        const wrapper = mount(button, {
            props: {
                type: 'primary'
            }
        })
        expect(wrapper.classes()).toContain('k-button--primary')
    })
})