vitest单元测试测试vue中了element项目安装与运行笔记
介绍
单元测试说时候我之前是不会用的，原因很简单，那就是成本太高了。我好不容易把功能都研发完了，还要再写代码做单元测试，研发成本毫无意义翻了两倍。测试原本就是运行起来手动点击两下就可以了，也耗费不了多少时间。中小型企业根本就玩不起单元测试。一直都觉得这个很鸡肋。但现在不一样的，因为有了AI有了智能体，可以让AI写单元测试，AI帮你测，测完之后帮你改。这样我们就不需要每次手动运行之后粘贴错误问题，继续问AI了。
安装步骤
安装插件
我这边的packge.json配置文件如下：
这里一定要注意了，这个vitest经常更新，所以下载安装都要对齐版本。第一个是node版本，第二个是vue版本。
npm install vitest@0.34.6
npm install @vue/test-utils@2.4.6
npm install jsdom@22.1.0
这里的vitest是针对vite启动的项目进行的单元测试。
@vue/test-utils 这个是针对vue框架的单元测试
jsdom 这个是测试的核心，也就是虚拟的浏览器一样，只是没有界面而已。
创建vitest.config.js文件
我们后续都是通过此文件进行启动，用什么插件(vue)、用那个模拟器工具(jsdom)、以及我们项目用的什么框架（element-plus）
代码如下：
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'/*** Vite配置函数* 配置Vite构建工具的各项参数，包括插件、路径别名和测试环境设置* @returns {object} 返回Vite配置对象*/
export default defineConfig({// 配置使用的插件列表plugins: [vue()],// 配置路径解析规则resolve: {// 设置路径别名映射alias: {// 将@符号映射到src目录的绝对路径'@': path.resolve(__dirname, './src')}},// 测试环境配置test: {// 设置测试运行环境为jsdom（模拟浏览器环境）environment: 'jsdom',// 启用全局变量支持globals: true,// 指定测试前的初始化文件setupFiles: ['./tests/setup.js'],// 依赖配置deps: {// 指定需要内联处理的依赖包inline: ['element-plus']}}
})这边运行之后会自动的去查询项目的所有的文件夹目录，找到.test.js文件然后执行测试。
创建初始化文件setup.js
代码如下：
import { config } from '@vue/test-utils'
import { vi } from 'vitest'/*** 配置Vue Test Utils的全局stub组件* * 该配置用于在测试中替换Element Plus组件库中的常用组件，* 避免在单元测试中渲染真实的组件，提高测试效率和稳定性。* 每个stub都定义了简化的模板结构和必要的props属性。*/
config.global.stubs = {'el-button': {template: '<button><slot /></button>'},'el-input': {template: '<input />',props: ['modelValue']},'el-card': {template: '<div><slot /><slot name="header" /></div>'},'el-form': {template: '<form><slot /></form>'},'el-form-item': {template: '<div><slot /></div>'},'el-input-number': {template: '<input type="number" />',props: ['modelValue']},'el-select': {template: '<select><slot /></select>',props: ['modelValue']},'el-option': {template: '<option><slot /></option>',props: ['label', 'value']}
}/*** 配置Vue Test Utils的全局mock对象* * 用于mock全局属性和方法，避免在测试环境中调用真实实现。* $t方法被mock为直接返回传入的翻译键名，简化国际化相关的测试。*/
config.global.mocks = {$t: (t) => t
}/*** mock Element Plus的消息提示相关函数* * 通过vitest的mock功能替换Element Plus中的ElMessage和ElMessageBox，* 将其替换为模拟函数，便于在测试中断言这些函数的调用情况。* 同时保持其他导出内容不变，确保不影响其他功能的正常使用。*/
vi.mock('element-plus', async () => {const actual = await vi.importActual('element-plus')return {...actual,ElMessage: vi.fn(),ElMessageBox: {confirm: vi.fn()}}
})配置测试文件
将要测试的vue文件同级目录下创建测试文件如下图：
index.test.js
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import TestView from './index.vue'describe('TestView', () => {it('renders correctly', () => {const wrapper = mount(TestView)expect(wrapper.text()).toContain('自动化测试专用页面')expect(wrapper.text()).toContain('测试组件')expect(wrapper.text()).toContain('表单测试')})it('increments count when button is clicked', async () => {const wrapper = mount(TestView)const buttons = wrapper.findAll('button')const clickButton = buttons[0] // "点击测试" buttonexpect(wrapper.text()).toContain('点击次数: 0')await clickButton.trigger('click')expect(wrapper.text()).toContain('点击次数: 1')await clickButton.trigger('click')expect(wrapper.text()).toContain('点击次数: 2')})it('updates input value when user types', async () => {const wrapper = mount(TestView)const input = wrapper.findAll('input').at(0) // 第一个input是测试输入框await input.setValue('测试输入')expect(input.element.value).toBe('测试输入')})
})运行
运行所有文件
package.json配置之后
"scripts": {"dev": "vite","build:prod": "vite build","build:stage": "vite build --mode staging","preview": "vite preview","test": "vitest","test:run": "vitest run"},直接输入命令 npm run test 即可运行全局的配置文件。这里会做实时监听也就是只要修改代码，都会自动运行测试。
输入命令 npm run test:run 则是一次性运行。运行就结束。
运行单个文件
npm run test:run -- ./src/views/test/index.test.js