title: Testing VueJS component containing other components written by myself
body: <p>I work on a website with multiple components that contain other components. Now I would like to test if the save button of a form is deactivated correctly if no data is set. I am using vuetify for the UI and Jest for testing.</p>
  
  <p>Here is my parent component, containing the edit-user-details component:</p>
  
  <pre><code>    &lt;template&gt;
      &lt;v-container&gt;
          &lt;v-form v-model="valid"&gt;
              &lt;v-card&gt;
                  &lt;v-card-text&gt;
                      &lt;edit-user-details :user="user"&gt;&lt;/edit-user-details&gt;
                  &lt;/v-card-text&gt;
                  &lt;v-card-actions&gt;
                      &lt;v-btn :disabled="!valid" @click="save()"&gt;Save&lt;/v-btn&gt;
                      &lt;v-btn @click="cancel()"&gt;Cancel&lt;/v-btn&gt;
                  &lt;/v-card-actions&gt;
              &lt;/v-card&gt;
          &lt;/v-form&gt;
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: "edit-user",
          components: {},
          data: () =&gt; ({
              user: {},
              valid: false
          }),
          methods: {
              save() {
                  ...
              },
              cancel() {
                  ...}
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is a part of the edit-user-details component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-container&gt;
          &lt;v-text-field
                  v-model="user.userName"
                  label="Username*"
                  required
                  :rules="[v =&gt; !!v || 'Please, enter a user name.']"
          &gt;&lt;/v-text-field&gt;
         ...
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: "edit-user-details",
          props: {
              user: {
                  type: Object,
                  default: () =&gt; ({})
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here we have my test:</p>
  
  <pre><code>import { mount, createLocalVue } from '@vue/test-utils'
  import EditUser from '../../src/views/EditUser'
  import Vuetify from 'vuetify';
  import EditUserDetails from '../../src/components/EditUserDetails'
  
  
  describe('Edited user data ', () =&gt; {
  
    it('can be saved if valid', () =&gt; {
        const localVue = createLocalVue();
        localVue.use(Vuetify)
        localVue.use(EditUserDetails)
  
        const wrapper = mount(EditUser, {
            localVue: localVue
        });
  
    })
  })
  </code></pre>
  
  <p>The test is green because it has no assert. The main issue is, that I get this error: [Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.</p>
  
  <p>So my question is: How can I test a component containing other components written by me?</p>
  
  <p>Thank you in advance for your help.</p>