使用Vitest测试Vue组件时如何初始化Vuelidate 2.0.0？

针对从Jest迁移到Vitest后，Vuelidate的v$对象仅包含根属性、子属性（如v$.formData）未初始化的问题，可尝试以下方案：

1. 确认Vitest的Vue 2.7配置正确 #

Vitest依赖@vitejs/plugin-vue2处理Vue 2.7项目，确保vite.config.ts中正确配置该插件：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    // 其他测试配置
  }
})

同时安装对应版本插件：npm install @vitejs/plugin-vue2 --save-dev

2. 手动触发Vuelidate初始化或校验 #

Vitest的异步渲染逻辑与Jest存在差异，$autoDirty可能无法自动触发子属性初始化。在测试中手动调用校验方法或等待Vue异步更新：

import { mount } from '@vue/test-utils'
import YourFormComponent from './YourFormComponent.vue'

test('校验表单同意字段', async () => {
  const wrapper = mount(YourFormComponent)
  const v$ = wrapper.vm.v$

  // 方案1：手动触发全量校验
  await v$.$validate()
  // 方案2：等待Vue异步更新完成
  // await wrapper.vm.$nextTick()

  expect(v$.formData.accepted.$invalid).toBe(true)
})

3. 检查组件中Vuelidate的初始化逻辑 #

确保useVuelidate参数传递正确，尤其是状态对象的关联：

<script setup>
import { reactive } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required } from '@vuelidate/validators'

// 定义表单状态
const formData = reactive({
  accepted: false
})

// 定义校验规则
const validations = {
  formData: {
    accepted: { required }
  }
}

// 初始化Vuelidate，务必传入状态对象作为第三个参数
const v$ = useVuelidate({ $autoDirty: true }, validations, { formData })

// 暴露v$给测试用例访问
defineExpose({ v$ })
</script>

若未正确传入状态对象，Vuelidate无法关联formData，会导致子校验属性无法生成。

4. 排查依赖预构建问题 #

Vitest的依赖预构建可能导致Vuelidate模块处理异常，可尝试禁用预构建或排除相关包：

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    disabled: true, // 全局禁用预构建
    // 或仅排除Vuelidate相关包
    // exclude: ['@vuelidate/core', '@vuelidate/validators']
  },
  // 其他配置
})

5. 验证依赖版本兼容性 #

确保以下依赖版本相互兼容：

• @vitejs/plugin-vue2 >= 2.2.0
• vitest >= 0.28.0
• vue = 2.7.14
• @vuelidate/core = 2.0.0

可通过更新依赖或锁定版本解决潜在兼容性问题。

内容的提问来源于stack exchange，提问作者Dónal