Vue Test Utils : Comment transmettre les règles de validation Vuelidate aux composants enfants ?

Question

En essayant d'utiliser vue test utils 编写 component test pour tester l'interaction entre un composant enfant et un autre contenu, je suis resté bloqué à cause de l'utilisation de Vuelidate dans le composant enfant. Voici un exemple simplifié :

// 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
   },
   ...
})

J'essaie de trouver une solution qui puisse installer (attention, je souhaite aussi installer des sous-composants, donc shallow-mount ce n'est pas ce que je recherche) des sous-composants et leurs règles de validation Vuelidate respectives, mais je n'ai pas encore trouvé de solution .

Au lieu de cela, mon test a donné l'erreur suivante :

Cannot read property `value` of undefined

Cela est logique car le test n'a pas accès à l'instance $v du composant enfant.

Quelqu'un l'a-t-il mis en œuvre jusqu'à présent ?

Answer 1

Pour répondre à votre question, après avoir fait quelques tests, je pense que vous avez raté la mount 内的 data partie

1. mount : Rendre les composants enfants
2. shallowMount : Ne pas restituer les composants enfants

MyParentComponent doit inclure la structure de votre sous-composant dans les options, c'est pourquoi il renvoie une erreur

Je vois que vous passez directement l'import du composant, mais n'oubliez pas que votre dossier de test est en dehors du src dossier

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

ne fonctionnera pas, je suggère plutôt d'utiliser directement des chemins absolus pour importer vos sous-composants ou d'utiliser la configuration pour les résoudre

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