Util Ujian Vue: Bagaimana untuk lulus peraturan pengesahan Vuelidate kepada komponen anak?

Question

Semasa cuba menggunakan vue test utils 编写 component test untuk menguji interaksi antara komponen kanak-kanak dan kandungan lain, saya tersekat kerana penggunaan Vuelidate dalam komponen kanak-kanak. Berikut ialah contoh ringkas:

// parent component code

<template>
   <div>
      <childA />
   </div>
</template>

//childA code

<template>
   <input v-model="value" />
</template>

<script>
   ...
   validations: {
      value: {
         required
      }
   }
...
</script>

// parent component test
...
const wrapper = mount(MyParentComponent, {
   ...,
   components: {
      childA,
   },
   validations: {
      value: required
   },
   ...
})

Saya cuba mencari penyelesaian yang boleh memasang (perhatikan, saya juga mahu memasang subkomponen, jadi shallow-mount bukan apa yang saya cari) subkomponen dan peraturan pengesahan Vuelidate masing-masing, tetapi saya belum menemui sebarang penyelesaian lagi .

Sebaliknya, ujian saya memberikan ralat berikut:

Cannot read property `value` of undefined

Ini masuk akal kerana ujian tidak mempunyai akses kepada $v contoh komponen kanak-kanak.

Adakah sesiapa yang melaksanakannya setakat ini?

Answer 1

Untuk menjawab soalan anda, selepas saya melakukan beberapa ujian, saya percaya anda terlepas bahagian mount 内的 data

1. mount: Render komponen kanak-kanak
2. shallowMount: Jangan buat komponen kanak-kanak

MyParentComponent perlu memasukkan struktur subkomponen anda dalam pilihan, jadi itulah sebabnya dia mengembalikan ralat

Saya nampak anda menghantar import komponen secara langsung, tetapi jangan lupa bahawa folder ujian anda berada di luar folder src

从“@/components/ChildA”导入ChildA；

tidak akan berfungsi, sebaliknya saya cadangkan untuk terus menggunakan laluan mutlak untuk mengimport subkomponen anda atau gunakan konfigurasi untuk menyelesaikannya

    const wrapper = mount(MyParentComponent, {
      data() {
        return {
          value: null
        }
      },
      components: {
        ChildA: () => import('../../src/components/ChildA'),
      },
      validations: {
        value: required
      },
    })