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

Question

在我的 Vue 2.7.14 应用程序中，我使用的是 Vuelidate 2.0.0。我正在尝试将测试从 Jest 迁移到 Vitest，但v$在后一种情况下该对象未正确初始化。该组件有一个绑定到的复选框formData.accepted

  validations () {
    return {
      formData: {
        accepted: {
          required,
          sameAs: sameAs(true)
        }
      }
    }
  }

Vuelidate 根据文档在组件内初始化

  setup () {
    return {
      v$: useVuelidate({ $autoDirty: true })
    }
  },

当我在 Jest 下运行以下测试时，它通过了

  it('click save button', async () => {
    const wrapper = mount(MyComponent)

    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeTruthy()
    await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeFalsy()
  })

但是，如果我使用 Vitest 运行相同的测试，它会失败，因为wrapper.vm.v$.formDataisundefined因为v$被初始化为：

v$ {
  "$dirty": false,
  "$path": "__root",
  "$model": null,
  "$error": false,
  "$errors": [],
  "$invalid": false,
  "$anyDirty": false,
  "$pending": false,
  "$silentErrors": [],
  "$validationGroups": {}
}

相比之下，当运行 Jest 测试时，$silentErrors不为空，并且以下属性路径（显然）有效

v$.formData.accepted.$invalid 

v$当使用 Vitest 运行测试时，我应该怎么做才能确保正确初始化？

Answer 1

第一次尝试：

您需要为包装器分配一个 const：

  it('click save button', async () => {
    const wrapper = mount(MyComponent)
    const { $v } = wrapper.vm;

    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeTruthy()
    await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeFalsy()
  })

进一步尝试：

validationMixin我认为您还缺少在测试文件中导入以使用该$v对象：

import { validationMixin } from 'vuelidate';

之后将您的组件更改为：

export default {
  mixins: [validationMixin],
  setup () {
    return {
      v$: useVuelidate()
    }
}

如果有效，我们很高兴收到反馈，如果无效，我们会到达那里。:)