前端单元测试配置

前端单元测试配置

vite创建项目可选单元测试配置

使用vitest进行单元测试或者使用cypress进行单元测试和端对端测试（不使用覆盖率，覆盖率需配置cypress云服务）

安装依赖

npm install vitest -D
npm install @vitest/ui -D
npm install @vitest/coverage-v8 // 使用覆盖率

配置vitest.config.ts

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: 'jsdom',
      exclude: [...configDefaults.exclude, 'docs/**', 'lib/**'],
      root: fileURLToPath(new URL('./', import.meta.url)),
      setupFiles: './test/setupTests.ts', // 可选：用于设置全局配置的文件
      coverage: {
        include: ['packages/**'],
        exclude: [
          ...configDefaults.exclude,
          'docs/**',
          'lib/**',
          '**/__tests__/**',
          '**/**.d.ts',
          'test/**'
          // 'packages/components/**/index.ts'
        ]
      }
    }
  })
)

修改pacakge.json

{
"scripts":{
    "test": "vitest",
	 "test:coverage": "vitest run --coverage", // 正常单元测试后运行查看覆盖率
    "test:unit:ui": "vitest --ui", // 可配置 --ui 使用可视化单元测试
}
}