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 ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour répondre à votre question, après avoir fait quelques tests, je pense que vous avez raté la
mount内的datapartiemount: Rendre les composants enfantsshallowMount: Ne pas restituer les composants enfantsMyParentComponentdoit inclure la structure de votre sous-composant dans les options, c'est pourquoi il renvoie une erreurJe vois que vous passez directement l'import du composant, mais n'oubliez pas que votre dossier de test est en dehors du
srcdossier从“@/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 }, })