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

})