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

2mbi3lxu  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(119)

bounty将在5天后过期。回答此问题可获得+500声望奖励。Dónal希望吸引更多人关注此问题。

在我的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$.formDataundefined,因为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$正确初始化?

nbysray5

nbysray51#

首次尝试:

您需要为 Package 器分配一个常量:

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

很高兴反馈,如果它的工作,如果没有,我们会得到那里。:)

相关问题