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] // "点击测试" 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