介绍
单元测试说时候我之前是不会用的，原因很简单，那就是成本太高了。我好不容易把功能都研发完了，还要再写代码做单元测试，研发成本毫无意义翻了两倍。测试原本就是运行起来手动点击两下就可以了，也耗费不了多少时间。中小型企业根本就玩不起单元测试。一直都觉得这个很鸡肋。但现在不一样的，因为有了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] // "点击测试" button
expect(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