这里主要说一下如何简单使用 vitest 如何使用 vitest 进行调试以及如何在vue vite项目中使用vitest对组件进行测试简单使用 简单搭建仅小白食用本文章请结合官方文档一起食用↓ ↓ ↓官方文档↑ ↑ ↑一. vitest是什么Vitest是由 Vite 团队开发的下一代 JavaScript/TypeScript 前端测试框架主打极致的测试速度和现代化的开发体验。核心特点和优势 极速测试基于 Vite 的 esbuild 预构建技术启动速度比 Jest 快 3-4 倍内存占用减少 60% 以上。 深度集成 Vite 生态直接复用项目的 Vite 配置和插件确保测试与开发环境完全一致实现零配置体验。 原生支持现代技术栈开箱即用 TypeScript、ES Module、JSX、Vue/React/Svelte 组件测试无需额外配置 Babel。 智能监听模式类似 Vite 的 HMR仅重运行受影响的测试提供实时反馈。以上内容由ai生成Vitest 旨在将自己定位为 Vite 项目的首选测试框架即使对于不使用 Vite 的项目也是一个可靠的替代方案。这一句来自官方文档二. 如何在项目中使用vitest1. 在项目中添加依赖提示Vitest 需要 Vite v6.0.0 和 Node v20.0.0pnpm add -D vitest2. 安装插件在测试的过程中我们可能会使用到断点对代码进行调试找到哪里出现了问题若没有用过vscode的断点调试功能这里我推荐你安装一个vscode插件 Vitest在webstorm中已经集成了该插件若你处在无ide环境进行测试可以参考官方文档上提供的方法 点击这里3. 调试这里仅展示vscode下的调试功能的使用这里准备两个文件sum.tsexport function sum(a: number, b:number) :number { return a b }sum.test.tsimport { 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 jsdom4.2 配置文件Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在vitest将读取你的根目录vite.config.ts以匹配插件并设置为你的 Vite 应用。就是说我们的vitest配置可以写在vite.config.ts配置文件中当然你也可以新建一个vitest.config.ts本文将直接写到vite.config.ts配置文件中vite.config.ts/// reference typesvitest/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.vuetemplate button classwq-button :classbutClass :disableddisabled clickclickHandle slot/slot /button /template script setup langts import { computed } from vue; interface Props { type?: string, disabled?: boolean } const emits defineEmits([click]) const { type normal,disabled } definePropsProps() 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.tsimport { 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 就可以对整个项目进行测试仓库地址
如何使用vitest的调试功能 及 如何使用vitest对组件进行测试
这里主要说一下如何简单使用 vitest 如何使用 vitest 进行调试以及如何在vue vite项目中使用vitest对组件进行测试简单使用 简单搭建仅小白食用本文章请结合官方文档一起食用↓ ↓ ↓官方文档↑ ↑ ↑一. vitest是什么Vitest是由 Vite 团队开发的下一代 JavaScript/TypeScript 前端测试框架主打极致的测试速度和现代化的开发体验。核心特点和优势 极速测试基于 Vite 的 esbuild 预构建技术启动速度比 Jest 快 3-4 倍内存占用减少 60% 以上。 深度集成 Vite 生态直接复用项目的 Vite 配置和插件确保测试与开发环境完全一致实现零配置体验。 原生支持现代技术栈开箱即用 TypeScript、ES Module、JSX、Vue/React/Svelte 组件测试无需额外配置 Babel。 智能监听模式类似 Vite 的 HMR仅重运行受影响的测试提供实时反馈。以上内容由ai生成Vitest 旨在将自己定位为 Vite 项目的首选测试框架即使对于不使用 Vite 的项目也是一个可靠的替代方案。这一句来自官方文档二. 如何在项目中使用vitest1. 在项目中添加依赖提示Vitest 需要 Vite v6.0.0 和 Node v20.0.0pnpm add -D vitest2. 安装插件在测试的过程中我们可能会使用到断点对代码进行调试找到哪里出现了问题若没有用过vscode的断点调试功能这里我推荐你安装一个vscode插件 Vitest在webstorm中已经集成了该插件若你处在无ide环境进行测试可以参考官方文档上提供的方法 点击这里3. 调试这里仅展示vscode下的调试功能的使用这里准备两个文件sum.tsexport function sum(a: number, b:number) :number { return a b }sum.test.tsimport { 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 jsdom4.2 配置文件Vitest 的主要优势之一是它与 Vite 的统一配置。如果存在vitest将读取你的根目录vite.config.ts以匹配插件并设置为你的 Vite 应用。就是说我们的vitest配置可以写在vite.config.ts配置文件中当然你也可以新建一个vitest.config.ts本文将直接写到vite.config.ts配置文件中vite.config.ts/// reference typesvitest/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.vuetemplate button classwq-button :classbutClass :disableddisabled clickclickHandle slot/slot /button /template script setup langts import { computed } from vue; interface Props { type?: string, disabled?: boolean } const emits defineEmits([click]) const { type normal,disabled } definePropsProps() 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.tsimport { 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 就可以对整个项目进行测试仓库地址
