使用 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$.formData

是

undefined

因为

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 

在使用Vitest运行测试时，我应该怎么做才能确保

v$

被正确初始化？

Answer 1

第一次尝试：

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

  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()
    }
}

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

Answer 2

要在使用 Vitest 测试 Vue 组件时初始化 Vuelidate，您可以使用以下方法：

1。将以下行添加到您的测试文件中：

import Vuelidate from 'vuelidate';

2。像这样在测试中使用 Vuelidate：

it('click save button', async () => {

const wrapper = mount(MyComponent)

const v = Vuelidate.instance()

expect(v.formData.accepted.$invalid).toBeTruthy()

await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')

expect(v.formData.accepted.$invalid).toBeFalsy()

})

3。确保 Vuelidate 在你的 Vue 组件中正确初始化，如下所示：

v$: useVuelidate({

$autoDirty: true

})