chore: add testing and coverage configuration with Vitest integration

Author: tangjinzhou

package.json

@@ -14,14 +14,18 @@
     "build": "turbo build",
     "dev": "turbo dev",
     "dev:apps": "turbo dev --filter=\"./apps/*\"",
-    "lint": "turbo lint"
+    "lint": "turbo lint",
+    "test": "turbo test",
+    "test:ui": "turbo test -- --ui",
+    "coverage": "turbo test -- --coverage"
   },
   "devDependencies": {
     "@ant-design-vue/eslint-config": "*",
     "@ant-design-vue/prettier-config": "*",
     "@ant-design-vue/typescript-config": "*",
     "@types/node": "^20.0.0",
     "eslint": "^8.56.0",
+    "vitest": "^3.2.4",
     "prettier": "^3.3.3",
     "esbuild": "^0.25.8",
     "turbo": "^2.4.4",

packages-config/vite-config/index.d.ts

@@ -1,11 +1,11 @@
-import { UserConfig, UserConfigFnObject } from 'vite'
+import { UserConfigFnObject, ViteUserConfig } from 'vitest/config.js'
 
 export type GetUserConfig = (
   dirname: string,
   overwriteLib?: boolean,
-) => UserConfig | UserConfigFnObject
+) => ViteUserConfig | UserConfigFnObject
 
 export declare function extendsConfig(
-  base: UserConfig | UserConfigFnObject,
-  overwrite: UserConfig | UserConfigFnObject,
+  base: ViteUserConfig | UserConfigFnObject,
+  overwrite: ViteUserConfig | UserConfigFnObject,
 ): UserConfigFnObject

packages-config/vite-config/package.json

@@ -21,12 +21,14 @@
     "@types/node": "^20.0.0",
     "@vitejs/plugin-vue": "^5.1.3",
     "vite": "^5.3.5",
+    "vitest": "^3.2.4",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
     "@vitejs/plugin-vue": "*",
     "typescript": "*",
     "vite": "5",
+    "vitest": "3",
     "vite-plugin-dts": "*"
   }
 }

packages/ui/package.json

@@ -22,7 +22,8 @@
     "dev": "vite build --watch --mode development",
     "lint": "eslint . --fix",
     "tsc": "tsc --noEmit",
-    "tsg": "tsc --declaration --declarationMap --emitDeclarationOnly --noEmit false --outDir dist/types"
+    "tsg": "tsc --declaration --declarationMap --emitDeclarationOnly --noEmit false --outDir dist/types",
+    "test": "vitest"
   },
   "type": "module",
   "exports": {
@@ -83,11 +84,17 @@
     "@ant-design-vue/tailwind-config": "*",
     "@tailwindcss/vite": "^4.1.3",
     "@vitejs/plugin-vue": "^5.1.3",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "vitest-fetch-mock": "^0.4.5",
+    "jsdom": "^26.0.0",
     "@vueuse/core": "^12.0.0",
     "@types/node": "^20.19.7",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.0.14",
     "typescript": "^5.8.2",
+    "vitest": "^3.2.4",
     "vite": "^5.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-svg-loader": "^5.1.0",

packages/ui/src/components/button/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button > should render correctly 1`] = `
+"<button class="ant-btn ant-btn-solid ant-btn-md">
+  <!--v-if-->
+  <!--v-if--><span></span>
+</button>"
+`;

packages/ui/src/components/button/__tests__/index.test.ts

@@ -0,0 +1,10 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Button } from '@ant-design-vue/ui'
+import { mount } from '@vue/test-utils'
+
+describe('Button', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

packages/ui/test/setup.ts

@@ -0,0 +1,8 @@
+import { vi } from 'vitest'
+import { config } from '@vue/test-utils'
+import createFetchMock from 'vitest-fetch-mock'
+
+const fetchMock = createFetchMock(vi)
+fetchMock.enableMocks()
+
+config.global.plugins = []

packages/ui/vite.config.ts

@@ -4,6 +4,7 @@ import { resolve } from 'node:path'
 import tailwindcss from '@tailwindcss/vite'
 import { readdirSync, statSync } from 'node:fs'
 import dts from 'vite-plugin-dts'
+import pkg from './package.json'
 
 // 获取所有组件目录
 function getComponents() {
@@ -34,6 +35,21 @@ export default extendsConfig(vue(__dirname, true), {
     },
   },
   plugins: [tailwindcss()],
+  test: {
+    alias: {
+      [pkg.name]: resolve(__dirname, './src'),
+    },
+    globals: true,
+    environment: 'jsdom',
+    testTimeout: 5000,
+    coverage: {
+      include: ['src/**/*.{ts,vue}'],
+      provider: 'v8',
+      allowExternal: true,
+      reporter: ['text', 'json', 'html'],
+    },
+    setupFiles: [resolve(__dirname, './test/setup.ts')],
+  },
   build: {
     cssCodeSplit: true,
     lib: {

vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    projects: ['packages/*'],
+  },
+})