How should Vuelidate be initialised when testing with Vitest?

[donalmurtagh]

The v$ object is not initialised correctly when a component is tested with Vitest. I have a very simple component with a checkbox bound to formData.accepted

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

Vuelidate is initialised within the component as per the docs

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

When I run the following test under Jest, it passes

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

However, if I run the same test using Vitest it fails because wrapper.vm.v$.formData is undefined because v$ is incorrectly initialised to:

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

By contrast, when the Jest test is run, v$.$silentErrors is not empty, and the following property path returns a value

v$.formData.accepted.$invalid 

What should I do to ensure that v$ is initialised correctly when the test is run with Vitest?

Dependencies

• Vue 2.7.14
• Vuelidate 2.0.0

[yacosta738]

Hi @donalmurtagh, how did you solve this problem? I am using Vue 3 and the latest version of Vuelidate, but the component is not created because the rules are not initialized correctly with Vitest.

[donalmurtagh]

@yacosta738 I'm using the latest versions of Vuelidate/Vitest/Vue. When I initilaize Vuelidate like this, it works

import { useVuelidate } from '@vuelidate/core'

export default {
  data() {
    return {
      v$: useVuelidate({ $autoDirty: true })
    }
  }
}