vue3 vite 使用vitest 单元测试 组件测试

单元测试

pnpm add -D vitest vue-test-utils @vue/test-utils jsdom @testing-library/vue @testing-library/jest-dom @vitest/uits项目需要加上
pnpm add -D @types/jest

修改 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],test: {globals: true,       // 支持 describe、it、expect 等全局函数environment: 'jsdom', // 模拟浏览器环境setupFiles: './test/setup.ts', // 可选，设置初始化文件include: ['tests/**/*.test.ts'],}
})

初始化测试文件结构

在项目根目录下创建 tests 目录：

📁 tests
│
├── 📄 setup.ts        // 初始化内容，比如 jest-dom 扩展
├── 📄 button.test.ts  // 单元测试示例
├── 📄 HelloWorld.test.ts  // 组件测试示例

• tests/setup.ts 示例：

import '@testing-library/jest-dom'

、编写一个单元测试（函数测试）

• src/utils/math.ts

export const add = (a: number, b: number) => a + b

tests/math.test.ts

import { describe, it, expect } from 'vitest'
import { add } from '../src/utils/math'describe('math utils', () => {it('adds numbers correctly', () => {expect(add(1, 2)).toBe(3)})
})

编写一个组件测试（UI 组件

src/components/HelloWorld.vue

<template><div><p data-testid="msg">{{ msg }}</p><button @click="count++">Count: {{ count }}</button></div>
</template><script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>

tests/HelloWorld.test.ts

import { render, fireEvent } from '@testing-library/vue'
import HelloWorld from '../src/components/HelloWorld.vue'
import { describe, it, expect } from 'vitest'describe('HelloWorld.vue', () => {it('renders props.msg', () => {const { getByTestId } = render(HelloWorld, { props: { msg: 'Hello Vitest' } })expect(getByTestId('msg')).toHaveTextContent('Hello Vitest')})it('increments counter on click', async () => {const { getByText } = render(HelloWorld, { props: { msg: 'Click test' } })const button = getByText(/Count:/)await fireEvent.click(button)expect(button.textContent).toBe('Count: 1')})
})

运行测试

pnpm vitest
# 或使用 UI 面板查看更方便
pnpm vitest --ui

测试用例目录

No test files found. You can change the file name pattern by pressing “p”

检查vite.config.ts的配置信息路径是否正确

vite.config.ts配置

test: {// jest like test apiglobals: true,// 模拟dom环境environment: 'happy-dom',include: ['src/tests/**/*.test.ts', //这里目录要正确不然会报错找不到测试脚本'src/tests/**/*.spec.ts',],setupFiles: 'src/tests/setup.ts',// 支持tsx,jsxtransformMode: {web: [/.[tj]sx$/]}},

package.json配置

 "test": "vitest"

运行命令pnpm test 即可执行