试试使用 Vitest 进行测试，确实可以减少bug
vitest的简单介绍
Vitest 是一个基于 Vite 的单元测试框架，专为现代前端项目设计。
它结合了 Vite 的高性能和 Jest 的易用性，
提供了开箱即用的 TypeScript、ESM 和 JSX 支持，同时与 Vite 的配置无缝集成。
安装vitest
npm install -D vitest
vite.config.js中配置vitest
/// <reference types="vitest" /> // 上面的这个是必须要写的，你需要注意一下，别漏掉了import vue from '@vitejs/plugin-vue'// https://vite.dev/config/export default defineConfig({plugins: ,base: './', //生产环境相对目录部署server: { open:true, //自动打开浏览器 host: '0.0.0.0', //通过ip的形式访问 cors: true, // 启用 CORS (boolean) 可以访问任何源上的资源 force: true, // 强制优化器忽略缓存并重新构建 (boolean) clearScreen: false, // 允许或禁用打印日志时清除屏幕(boolean)},// 新增 vitest配置test:{ environment: 'happy-dom', // 表示测试环境}})happy-dom
首先我们要安装 npm i happy-dom -D
因为我们后面的测试需要依赖它。
happy-dom:完整的 Web 浏览器环境。
包括 DOM 解析、CSS 渲染和 JavaScript 执行等核心模块。
但剥离了图形用户界面(GUI)的依赖
// package.json 文件"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", // 新增下面这2行 "test": "vitest", "coverage": "vitest run --coverage"},我们等会使用 npm test命令就可以测试啦
测试2个数相加,使用toBe来比较值
// src\test\index.spec.js 需要你创建import { describe, it,expect } from "vitest"/** * describe中的第1个参数： first test 表示的是测试标题 * 第2个参数：表示的是测试的内容 * */ describe("first test", () => {it("should is 2", () => { // 表示测试的内容 expect(1+2), toBe(2)等于2 expect(1+2).toBe(3)})})执行 npm test
比较返回来的值是否符合预期,使用
// src\utils\common.js 公共文件// 找出小于18岁的人的信息export function getNoAdultPerson(dataObj){// 不影响原始数据let dataNewObj = JSON.parse(JSON.stringify(dataObj));// 收集要删除的属性名let keysToDelete = [];for (let key in dataNewObj) { if (dataNewObj.hasOwnProperty(key) && dataNewObj.age >=18) { keysToDelete.push(key); }}// 删除收集到的属性keysToDelete.forEach(key => { delete dataNewObj;});return dataNewObj;}<template><div> <h1 class="main">下面是数据</h1> {{ data }}</div></template><script setup>import { getNoAdultPerson } from '../../utils/common.js';import { ref } from 'vue';let obj= {"zhansan": { user: "zhansan", age: 14},"lisi": { user: "lisi", age: 26}}let data = getNoAdultPerson(obj)</script>// src\test\index.spec.js 测试文件import { describe, it,expect } from "vitest"import { getNoAdultPerson } from "../utils/common.js"// 这个测试用例是找出age<18的用户的信息describe("second test", () => {const writeData= { "zhansan": { user: "zhansan", age: 14 }, "lisi": { user: "lisi", age: 26 }}const expectData = { "zhansan": { "user": "zhansan", "age": 14 } }it("test adult", () => { // 这里必须要使用toEqual，不能够使用toBe expect(getNoAdultPerson(writeData)).toEqual(expectData)})})执行 npm test
toBe 和 toEqual 的区别
toEqual 通常用于比较对象或数组的值是否相等,而不是检查它们是否是同一个实例。
比如:两个不同的对象,如果属性值都相同。用toEqual会通过,而toBe不会。
toBe检查的是严格相等,即对象引用是否相同。通常用来比较简单数据类型或实例是否相等
验证:toBe检查的是严格相等,即对象引用是否相同
import { describe, it,expect } from "vitest"let obj1 = { a: 1, b: 2 }let obj2 = { a: 1, b: 2 }describe("test toBe", () => {it("yan zheng toBe", () => { // 因为 obj1 和 obj2 是两个不同的对象，所以它们不相等，所以测试用例会失败 expect(obj1).toBe(obj2)})})如果我们想要让 obj1等于obj2,我们可以使用 toEqual。
因为：toEqual 只会比较对象中的值是否相等,而不会比较是否是同一个实例。
vue组件测试
如果需要对组件进行测试，我们需要借助 Vue Test Utils
它的地址：https://test-utils.vuejs.org/guide/
Vue Test Utils 1 适用于 Vue 2。
Vue Test Utils 2 使用于 Vue 3。
首先需要安装：npm install --save-dev @vue/test-utils
其他知识点：
yarn add = npm i
--save-dev 等价与-D
测试组件的内容 slot
ListCard.vue文件,是一个组件
<template><div> <h1>{{ titleName }}</h1> <main> <slot /> </main> <footer> Thanks for visiting. </footer></div></template><script setup>import {defineProps} from 'vue'defineProps({titleName:{ type: String, default: '我是默认值'}})</script>下面是单元测试的文件
import { describe, it,expect } from "vitest";import { mount } from "@vue/test-utils"import listCard from "./ListCard.vue"describe ('listCard test', () => {it('test demo1', () => { const listDemo = mount(listCard,{ slots:{ default: '张三的详细信息' } }) console.log('输出的值：',listDemo.text()) expect(listDemo.text()).toContain('Thanks')})})
toContain的简单介绍
toContain() 是一个断言匹配器,它的作用是检查某个值是否包含指定的子字符串、数组元素、集合成员。
// 检查数组是否包含元素expect().toContain(2) // 通过// 检查 Set 是否包含值expect(new Set()).toContain(3) // 通过// 检查长字符串包含子串expect('Hello World').toContain('llo W') // 通过测试某一个标签中的具体内容
<template><div> <h1 class="head-title">{{ titleName }}</h1> <h1>我也是表退</h1> <main> <slot /> </main> <footer> Thanks for visiting. </footer> <h1 class="footer-title"></h1></div></template><script setup>import {defineProps} from 'vue'defineProps({titleName:{ type: String, default: '我是默认值'}})</script>import { describe, it,expect } from "vitest";import { mount } from "@vue/test-utils"import listCard from "./ListCard.vue"describe ('测试组件', () => {it('测试某一个具体元素的文本', () => { const listDemo = mount(listCard) // 查询组件中类名是head-title的标签，并获取标签中的文本内容, expect(listDemo.find('').text()).toBe('我是默认值')})})测试组件中的插槽
现在我们想去验证 main 元素中的的插槽是否正确。
我们需要在mount中的去设置插槽
验证插槽是否存在，通过exists来进行判断的哈。
然后再通过 toContain验证是否包含我们设置的html元素。
<template><div> <h1 class="head-title">{{ titleName }}</h1> <h1>{{ titleName }}</h1> <h1tef="headTitle">我也是表退</h1> <main> <slot /> </main> <footer> Thanks for visiting. </footer> <h1 class="footer-title"></h1></div></template><script setup>import {defineProps} from 'vue'defineProps({titleName:{ type: String, default: '我是默认值'}})</script>import { describe, it,expect } from "vitest";import { mount } from "@vue/test-utils"import listCard from "./ListCard.vue"describe ('测试组件', () => {it('测试组件的插槽', () => { // slotContent 也可以等于一个组件，这个组件需要我们引入进来。下面是一个html，也相当于一个组件 const slotContent = `<div data-test="slot-content">我是插槽-</div>` // 给这个组件放置插槽 const listDemo = mount(listCard,{ slots: { default: slotContent } }) // 验证插槽是否存在 expect(listDemo.find('').exists()).toBe(true) // 验证插槽中的html内容，验证html内容一般使用toContain expect(listDemo.find('main').html()).toContain(slotContent)})})测试超长标题并显示省略号
<template><div> <h1 class="head-title">{{ titleName }}</h1> <h1tef="headTitle">我也是表退</h1> <main> <slot /> </main> <footer> Thanks for visiting. </footer> <h1 class="footer-title"></h1></div></template><script setup>import {defineProps} from 'vue'defineProps({titleName:{ type: String, default: '我是默认值'}})</script><style scoped>.head-title{white-space: nowrap; /* 防止文本换行 */overflow: hidden; /* 隐藏溢出的文本 */text-overflow: ellipsis; /* 显示省略号 */width: 50%; }</style>import { describe, it,expect } from "vitest";import { mount } from "@vue/test-utils"import listCard from "./ListCard.vue"describe ('测试组件', () => {it('应处理超长标题并显示省略号', () => { const longTitle = '日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。标签: 小学古诗写景庐山景色瀑布山水数字出自部编版二年级上《古诗二首》'; const listDemo = mount(listCard, { props: { titleName: longTitle } }); // 获取class="head-title这个元素的文本内容，并判断是否包含省略号 expect(listDemo.find('class="head-title"').text()).toContain('...');});})查看单元测试的覆盖率
在package.json中,我们会在 scripts 下看见
"coverage": "vitest run --coverage"
这条命令可以查看单元测试的覆盖率
然后执行：npm run coverage
如果没有安装 @vitest/coverage-v8的话
会有下面的提示信息：
? Do you want to install @vitest/coverage-v8?» (y/N)
我们输入y，然后回车，就会自动安装。
安装成功之后，我们再次执行：npm run coverage
{"name": "studyvite5","private": true,"version": "0.0.0","type": "module","scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "vitest", // 查看单元测试的覆盖率的配置 "coverage": "vitest run --coverage"}}
%Stmts, %Branch, %Funcs,%Lines, Uncovered Line的意思
%Stmts(语句覆盖率)：测试覆盖了多少比例的代码语句。
%Branch(分支覆盖率)：测试覆盖了多少比例的条件分支(如 if/else 语句的两个分支)
%Funcs(函数覆盖率)：测试覆盖了多少比例的函数或方法。
%Lines(行覆盖率)：测试覆盖了多少比例的代码行。
Uncovered Line #s(未覆盖的行号)：具体哪些代码行未被测试覆盖
页:
[1]