Vue Test Utils: How to pass Vuelidate validation rules to child components?

Question

While trying to write a component test using vue test utils to test the interaction between a child component and other content, I got stuck due to the use of Vuelidate in the child component. Here is a simplified example:

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

I'm trying to find a mountable solution (note that I also want to mount subcomponents, so shallow-mount is not what I'm looking for%E

Answer 1

To answer your question, after I did some testing, I believe you are missing the data part inside the mount

1. mount：Render subcomponent
2. shallowMount：Do not render child components

MyParentComponent needs to include the structure of your child component in the options, so that's why he returns an error

I saw you sent it directly