vue3+vite项目中搭建vitest测试环境

1.安装所需插件

pnpm install -D vitest happy-dom @testing-library/vue

2.修改vite.config.ts

这里最上面一行的/// 必须要加

/// <reference types="vitest" />

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  // 使用这个必须在上面加/// <reference types="vitest" /> 不然会有类型报错
  test: {
    // jest like test api
    globals: true,
    // 模拟dom环境
    environment: 'happy-dom',
    // 支持tsx,jsx
    transformMode: {
      web: [/.[tj]sx$/]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3.修改tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    // 单元测试的支持
    "types": ["vitest/globals"],
    // 解决测试文件中的 '--isolatedModules'报错
    "isolatedModules": false
  },
  ...
}

4.在package.json中添加脚本命令

"scripts": {
    "dev": "vite",
   	...
    "test": "vitest"
  },

5.添加测试文件 文件名xxx.test.ts，比如新建一个Test.test.ts

import { render } from '@testing-library/vue'
// 导入你要测试的组件
import Test from './Test'

test('Test.tsx should work', () => {
  // 渲染组件
  const { getByText } = render(Test)
  // assert output 断言输出结果
  getByText('test: 0')
})

6. 运行pnpm test