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

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

})