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

fgw7neuy 于 2023-05-18 发布在 Vue.js

关注(0)|答案(2)|浏览(162)

在我的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$被正确初始化？

vue.js

来源：https://stackoverflow.com/questions/74734030/how-to-initialise-vuelidate-2-0-0-when-testing-a-vue-component-with-vitest

2条答案

按热度按时间

h6my8fg21#

首次尝试：

你需要给 Package 器分配一个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()
    }
}

很高兴收到反馈，如果它工作，如果没有，我们会到达那里。：）

赞(0）回复(0）举报 2023-05-18

0lvr5msh2#

要在使用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

})

赞(0）回复(0）举报 2023-05-18

我来回答

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

2条答案

相关问题

热门标签

最新问答