如何使用vitest的调试功能 及 如何使用vitest对组件进行测试

这里主要说一下如何简单使用 vitest ，如何使用 vitest 进行调试，以及如何在vue + vite项目中使用vitest对组件进行测试

（简单使用 + 简单搭建，仅小白食用）

本文章请结合官方文档一起食用

↓ ↓ ↓

官方文档

↑ ↑ ↑

一. vitest是什么？

Vitest是由 Vite 团队开发的下一代 JavaScript/TypeScript 前端测试框架，主打极致的测试速度和现代化的开发体验。

核心特点和优势：

1. 🔥 极速测试：基于 Vite 的 esbuild 预构建技术，启动速度比 Jest 快 3-4 倍，内存占用减少 60% 以上。
2. 🚀 深度集成 Vite 生态：直接复用项目的 Vite 配置和插件，确保测试与开发环境完全一致，实现零配置体验。
3. 🎯 原生支持现代技术栈：开箱即用 TypeScript、ES Module、JSX、Vue/React/Svelte 组件测试，无需额外配置 Babel。
4. 👨‍💻 智能监听模式：类似 Vite 的 HMR，仅重运行受影响的测试，提供实时反馈。

以上内容由ai生成

Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。

这一句来自官方文档

二. 如何在项目中使用vitest？

1. 在项目中添加依赖

提示

Vitest 需要 Vite >=v6.0.0 和 Node >=v20.0.0

pnpm add -D vitest

2. 安装插件

在测试的过程中，我们可能会使用到断点对代码进行调试，找到哪里出现了问题

若没有用过vscode的断点调试功能，这里我推荐你安装一个vscode插件： Vitest

在webstorm中已经集成了该插件

若你处在无ide环境进行测试，可以参考官方文档上提供的方法 点击这里

3. 调试

这里仅展示vscode下的调试功能的使用

这里准备两个文件

sum.ts

export function sum(a: number, b:number) :number  {
    return a + b
}

sum.test.ts

import { expect, test } from 'vitest'
import { sum } from '../src/sum.ts'

test('add 1 + 2 to equal 3', () => {
    const a = 1
    const b = 2
    expect(sum(a, b)).toBe(3)
})

这时test函数附近会出现一个运行的图标

先添加一个断点

右键这个运行图标，点击调试测试

这样我们就可以在ide中进行调试啦

4. 在vite + vue项目中对组件进行测试

适用场景：前端组件库与工具库的开发，新建项目

4.1 依赖下载

标题说的没错，为了测试组件，我们除了vitest还需要下载一些依赖

# vue的测试工具
pnpm add -D @vue/test-utils
#  Node.js 环境中模拟完整浏览器环境 的纯 JavaScript 库， 提供无浏览器的测试环境
pnpm add -D jsdom

4.2 配置文件

Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在，vitest 将读取你的根目录 vite.config.ts 以匹配插件并设置为你的 Vite 应用。

就是说我们的vitest配置可以写在 vite.config.ts 配置文件中，当然你也可以新建一个 vitest.config.ts

本文将直接写到 vite.config.ts 配置文件中

vite.config.ts

/// <reference types="vitest/config" />
// 上面这行是 TypeScript 的三斜杠指令，用于引用 `vitest` 的类型定义。它确保我们在编写测试时可以使用 Vitest 提供的全局 API（如 `describe`、`test`、`expect` 等），并且获得正确的类型提示。

import { defineConfig } from "vite";
// 从 Vite 中导入 `defineConfig` 函数，用于定义 Vite 的配置对象。Vite 是一个现代的构建工具，支持快速开发和高效的生产构建。

import vue from "@vitejs/plugin-vue";
// 导入 Vite 的 Vue 插件，该插件用于处理 `.vue` 文件，支持单文件组件（SFC）的编译和热更新。

import vueJsx from "@vitejs/plugin-vue-jsx";
// 导入 Vite 的 Vue JSX 插件，该插件允许在 Vue 组件中使用 JSX 语法，适用于需要 JSX 支持的项目。

// Vite 配置对象，用于定义项目的构建和开发环境设置
export default defineConfig({
  plugins: [vue(),vueJsx()],
  test: {
    globals: true, // 启用全局模式，使得 Vitest 的全局 API（如 `describe`、`test`、`expect` 等）可以直接在测试文件中使用，而不需要显式导入。
    environment: "jsdom", // 指定测试环境为 `jsdom`，这是一个虚拟的 DOM 实现，适用于浏览器环境的测试。`jsdom` 可以模拟浏览器的行为，使得我们可以测试与 DOM 相关的功能，而不需要实际打开浏览器。
  },
});

新建一个组件 Button.vue

<template>
  <button class="wq-button" :class="butClass" :disabled="disabled" @click="clickHandle">
    <slot></slot>
  </button>
</template>

<script setup lang='ts'>
import { computed } from 'vue';

interface Props {
  type?: string,
  disabled?: boolean
}
const emits = defineEmits(['click'])
const { type = 'normal',disabled } = defineProps<Props>()


const clickHandle = (evt: Event) => {
  if (disabled) {
      return 
    }
    emits('click', evt)
}

const butClass = computed(() => {
  const res = []
  // 添加type
  res.push('wq-button--'+ type)
  return res
})

</script>

<style scoped>

.wq-button--noraml{
  color: black;
  background: #fff;
}

.wq-button--primary{
  color: #fff;
  background: skyblue;
}

</style>

新建测试文件button.spec.ts

import { describe, test, expect } from "vitest";
import { mount } from "@vue/test-utils";
import Button from "./index.vue";

// 使用 vitest 的 describe 函数来定义测试套件，测试 Button.vue 组件
describe("Button.vue", () => {
  // 测试基础按钮的功能
  test("basic button", () => {
    // 使用 mount 函数挂载 Button 组件，并传递 props 和 slots
    const wrapper = mount(Button, {
      props: {
        type: "primary", // 设置按钮类型为 "primary"
      },
      slots: {
        default: "button", // 设置默认插槽内容为 "button"
      },
    });

    // 打印组件的 HTML 结构，用于调试
    console.log(wrapper.html());
    // console.log(JSON.stringify(wrapper))

    // 检查按钮是否具有预期的类名 "jd-button--primary"
    expect(wrapper.classes()).toContain("wq-button--primary");

    // 检查按钮的文本内容是否为 "button"
    expect(wrapper.get("button").text()).toBe("button");

    // 检查页面中只有一个按钮元素
    expect(wrapper.findAll("button").length).toBe(1);

    // 触发按钮的点击事件
    wrapper.get("button").trigger("click");

    // 检查按钮是否触发了 "click" 事件
    expect(wrapper.emitted()).toHaveProperty("click");
  });

  // 测试禁用按钮的功能
  test("disabled button", () => {
    // 挂载 Button 组件，并设置 disabled 属性为 true
    const wrapper = mount(Button, {
      props: {
        disabled: true,
      },
      slots: {
        default: "button",
      },
    });

    // 检查按钮是否具有 "disabled" 属性
    expect(wrapper.get("button").attributes("disabled")).toBeDefined();

    // 触发禁用按钮的点击事件
    wrapper.get("button").trigger("click");

    // 检查禁用按钮是否没有触发 "click" 事件
    expect(wrapper.emitted()).not.toHaveProperty("click");
  });

  // 测试加载中的按钮
  test("loading", () => {
    // 挂载 Button 组件，并设置 loading 属性为 true
    const wrapper = mount(Button, {
      props: {
        loading: true,
      },
      slots: {
        default: "loading",
      },
      global: {
        stubs: ["Icon"], // 模拟本地的 Icon 组件
      },
    });

    // 打印组件的 HTML 结构，用于调试
    console.log(wrapper.html());

    // 检查按钮是否具有 "is-loading" 类名
    expect(wrapper.get("button").classes()).toContain("is-loading");

    // 检查按钮的文本内容是否为 "loading"
    expect(wrapper.get("button").text()).toBe("loading");
  });
});

这时我们就能再次看到熟悉的图标了

我们可以在 package.json 中新建一条指令

这样我们只需使用 npm run test 就可以对整个项目进行测试

仓库地址