title: Vue testing with Vuetify. Cannot read property 'title' of undefined
body: <p>I am trying to test if the dialog created with vuetify will be active or not after I emit a function called closeNoteForm. However, when I try to test the dialog content being hidden or not, I get an error. It seems the problem is within the noteForm wrapper that I created. But it just points to the css and doesn't make much sense to me.</p>
  <p>In my NoteForm component</p>
  <pre><code>&lt;template&gt;
    &lt;v-card class=&quot;note-form-container&quot;&gt;
      &lt;v-text-field
        v-model=&quot;title&quot;
        placeholder=&quot;Note Title&quot;
        hide-details
        class=&quot;font-weight-bold text-h5 pa-2&quot;
        flat
        solo
        color=&quot;yellow&quot;
      &gt;
      &lt;/v-text-field&gt;
  
      &lt;vue-tags-input
        v-model=&quot;tag&quot;
        :tags=&quot;tags&quot;
        @tags-changed=&quot;(newTags) =&gt; (tags = newTags)&quot;
      /&gt;
  
      &lt;div class=&quot;mt-2&quot;&gt;
        &lt;input
          type=&quot;file&quot;
          id=&quot;uploadImg&quot;
          style=&quot;display: none&quot;
          multiple
          accept=&quot;image/*&quot;
          v-on:change=&quot;handleFileUploads&quot;
        /&gt;
        &lt;label class=&quot;text-button pa-2 upload__label ml-3 mt-2&quot; for=&quot;uploadImg&quot;
          &gt;Upload Image&lt;/label
        &gt;
      &lt;/div&gt;
      &lt;v-container&gt;
        &lt;v-row justify=&quot;space-around&quot;
          &gt;&lt;div v-for=&quot;(image, index) in allImages&quot; :key=&quot;index&quot;&gt;
            &lt;div style=&quot;position: relative&quot;&gt;
              &lt;v-img
                :src=&quot;image&quot;
                height=&quot;70px&quot;
                width=&quot;70px&quot;
                contain
                class=&quot;mx-2 uploaded__image&quot;
                @click=&quot;openImage(image)&quot;
              &gt;&lt;/v-img&gt;
              &lt;v-btn
                icon
                color=&quot;pink&quot;
                class=&quot;close__button&quot;
                @click=&quot;handleDeleteButton(image)&quot;
              &gt;
                &lt;v-icon&gt;mdi-close&lt;/v-icon&gt;
              &lt;/v-btn&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
  
      &lt;v-textarea
        v-model=&quot;text&quot;
        clearable
        clear-icon=&quot;mdi-close-circle&quot;
        no-resize
        hide-details
        solo
        flat
      &gt;&lt;/v-textarea&gt;
  
      &lt;v-card-actions&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-btn text @click=&quot;closeForm()&quot; class=&quot;close__btn&quot;&gt; Close &lt;/v-btn&gt;
        &lt;v-btn color=&quot;secondary darken-2&quot; text @click=&quot;saveNote&quot;&gt; Save &lt;/v-btn&gt;
      &lt;/v-card-actions&gt;
      &lt;v-dialog v-model=&quot;dialog&quot; width=&quot;500&quot; dark&gt;
        &lt;v-img :src=&quot;selectedImage&quot; @click=&quot;dialog = false&quot;&gt;&lt;/v-img&gt;
      &lt;/v-dialog&gt;
      &lt;v-dialog
        v-model=&quot;imageDeletionDialog&quot;
        width=&quot;500&quot;
        class=&quot;image_delete_dialog&quot;
      &gt;
        &lt;v-img :src=&quot;selectedImage&quot;&gt;&lt;/v-img&gt;
        &lt;v-btn color=&quot;red darken-1&quot; text @click=&quot;deleteImage&quot;&gt;
          Delete Image
        &lt;/v-btn&gt;
        &lt;v-btn text @click=&quot;imageDeletionDialog = false&quot;&gt; Close &lt;/v-btn&gt;
      &lt;/v-dialog&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
    
  &lt;script&gt;
  import { EventBus } from &quot;../event-bus&quot;;
  import VueTagsInput from &quot;@johmun/vue-tags-input&quot;;
  import { v4 as uuidv4 } from &quot;uuid&quot;;
  import dbService from &quot;../services/db_service&quot;;
  
  export default {
    name: &quot;NoteForm&quot;,
    components: { VueTagsInput },
  
    data: () =&gt; {
      return {
        text: &quot;&quot;,
        title: &quot;&quot;,
        tag: &quot;&quot;,
        tags: [],
        currentNoteID: null,
        allImages: [],
        dialog: false,
        selectedImage: &quot;&quot;,
        imageDeletionDialog: false,
      };
    },
  
    mounted() {
      EventBus.$on(&quot;editNote&quot;, (noteToEdit) =&gt; {
        this.fillNoteForm(noteToEdit);
      });
    },
    methods: {
      openImage(image) {
        this.selectedImage = image;
        this.dialog = true;
      },
      handleDeleteButton(image) {
        this.imageDeletionDialog = true;
        this.selectedImage = image;
      },
      deleteImage() {
        this.allImages = this.allImages.filter(
          (img) =&gt; img !== this.selectedImage
        );
        this.imageDeletionDialog = false;
        this.selectedImage = &quot;&quot;;
      },
      handleFileUploads(e) {
        const images = e.target.files;
        let imageArray = [];
        for (let i = 0; i &lt; images.length; i++) {
          const reader = new FileReader();
          const image = images[i];
          reader.onload = () =&gt; {
            imageArray.push(reader.result);
          };
          reader.readAsDataURL(image);
        }
        this.allImages = imageArray;
  
        e.target.value = &quot;&quot;;
      },
  
      saveNote() {
        if (this.title.trim() === &quot;&quot;) {
          alert(&quot;Please enter note title!&quot;);
          return;
        }
        if (this.text === null) this.text = &quot;&quot;;
        if (this.currentNoteID === null) {
          this.createNewNote();
        } else {
          this.updateNote();
        }
        this.resetForm();
      },
      createNewNote() {
        const tagList = this.tags.map((tag) =&gt; {
          return tag.text;
        });
        const uuid = uuidv4();
        const newNote = {
          title: this.title,
          tags: this.tags,
          text: this.text,
          uuid,
          date: new Date().toLocaleString(),
          tagList,
          allImages: this.allImages,
        };
  
        dbService.addNote(newNote);
        EventBus.$emit(&quot;addNewNote&quot;, newNote);
        EventBus.$emit(&quot;closeNoteForm&quot;);
      },
      updateNote() {
        const tagList = this.tags.map((tag) =&gt; {
          return tag.text;
        });
        let updatedNote = {
          tags: this.tags,
          uuid: this.currentNoteID,
          text: this.text,
          title: this.title,
          tagList: tagList,
          allImages: this.allImages,
        };
        dbService.updateNote(updatedNote);
        EventBus.$emit(&quot;updateNote&quot;, updatedNote);
      },
      resetForm() {
        this.tags = [];
        this.text = &quot;&quot;;
        this.title = &quot;&quot;;
        this.currentNoteID = null;
        this.allImages = [];
        this.selectedImage = &quot;&quot;;
      },
      closeForm() {
        if (this.currentNoteID !== null) {
          EventBus.$emit(&quot;openNoteView&quot;, this.currentNoteID);
        }
        this.resetForm();
        **EventBus.$emit(&quot;closeNoteForm&quot;);**
      },
      fillNoteForm(noteToEdit) {
        this.text = noteToEdit.text;
        this.title = noteToEdit.title;
        this.tags = noteToEdit.tags;
        this.currentNoteID = noteToEdit.uuid;
        this.allImages = noteToEdit.allImages;
      },
    },
    beforeDestroy() {
      EventBus.$off(&quot;fillNoteForm&quot;, this.fillNoteForm);
    },
  };
  &lt;/script&gt;
  
  &lt;style lang=&quot;scss&quot; &gt;
  .uploaded__image {
    position: relative;
    cursor: pointer;
  }
  .close__button {
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .upload__label {
    background-color: gray;
    cursor: pointer;
    &amp;:hover {
      background-color: lightgrey;
    }
  }
  .note-form-container {
    scrollbar-width: none;
  }
  .v-input__control,
  .v-input__slot,
  .v-text-field__slot {
    height: 100% !important;
  }
  .v-textarea {
    height: 350px !important;
  }
  .vue-tags-input {
    max-width: 100% !important;
    border: none;
    background: transparent !important;
  }
  .v-dialog {
    background-color: rgb(230, 230, 230);
  }
  
  .vue-tags-input .ti-tag {
    position: relative;
  }
  
  .vue-tags-input .ti-input {
    padding: 4px 10px;
    transition: border-bottom 200ms ease;
    border: none;
    height: 50px;
    overflow: auto;
  }
  
  .note-form-container.theme--dark {
    .vue-tags-input .ti-tag {
      position: relative;
      background: white;
      color: black !important;
    }
    .vue-tags-input .ti-new-tag-input {
      color: #07c9d2;
    }
  }
  .note-form-container.theme--light {
    .vue-tags-input .ti-tag {
      position: relative;
      background: black;
      color: white !important;
    }
    .vue-tags-input .ti-new-tag-input {
      color: #085e62;
    }
  }
  &lt;/style&gt;
  </code></pre>
  <p>My Note component</p>
  <pre><code> &lt;template&gt;
    &lt;v-dialog width=&quot;500px&quot; v-model=&quot;dialog&quot;&gt;
      &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
        &lt;v-card
          v-bind=&quot;attrs&quot;
          v-on=&quot;on&quot;
          height=&quot;200px&quot;
          color=&quot;primary&quot;
          class=&quot;note_card&quot;
        &gt;
          &lt;v-card-title class=&quot;text-header font-weight-bold white--text&quot;
            &gt;{{ note.title }}
          &lt;/v-card-title&gt;
  
          &lt;v-card-subtitle
            v-if=&quot;note.text.length &lt; 150&quot;
            class=&quot;text-caption white--text note__subtitle&quot;
          &gt;
            {{ note.text }}
          &lt;/v-card-subtitle&gt;
          &lt;v-card-subtitle v-else class=&quot;text-caption note__subtitle&quot;&gt;
            {{ note.text.substring(0, 150) + &quot;..&quot; }}
          &lt;/v-card-subtitle&gt;
        &lt;/v-card&gt;
      &lt;/template&gt;
      &lt;template&gt;
        &lt;v-card class=&quot;read_only_note&quot;&gt;
          &lt;v-card-subtitle class=&quot;text-h4 black--text font-weight-bold pa-5&quot;
            &gt;{{ note.title }}
          &lt;/v-card-subtitle&gt;
          &lt;v-card-subtitle&gt;
            &lt;span
              v-for=&quot;(note, index) in this.note.tagList&quot;
              :key=&quot;index&quot;
              class=&quot;tag_span&quot;
            &gt;
              {{ note }}
            &lt;/span&gt;
          &lt;/v-card-subtitle&gt;
          &lt;v-container&gt;
            &lt;v-row justify=&quot;space-around&quot; class=&quot;note__images&quot;
              &gt;&lt;div v-for=&quot;(image, index) in note.allImages&quot; :key=&quot;index&quot;&gt;
                &lt;v-img
                  :src=&quot;image&quot;
                  height=&quot;70px&quot;
                  width=&quot;70px&quot;
                  contain
                  class=&quot;mx-2&quot;
                  @click=&quot;openImage(image)&quot;
                &gt;&lt;/v-img&gt;
              &lt;/div&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;/v-row&gt;
          &lt;/v-container&gt;
          &lt;v-card-subtitle class=&quot;text__container&quot;&gt;
            &lt;p v-html=&quot;convertedText&quot; @click=&quot;detectYoutubeClick&quot;&gt;&lt;/p&gt;
          &lt;/v-card-subtitle&gt;
          &lt;v-card-actions&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-btn color=&quot;red darken-1&quot; text @click=&quot;deleteDialog = true&quot;&gt;
              Delete
            &lt;/v-btn&gt;
            &lt;v-btn color=&quot;secondary darken-2&quot; text @click=&quot;closeNoteView()&quot;&gt;
              Close
            &lt;/v-btn&gt;
            &lt;v-btn color=&quot;secondary darken-2&quot; text @click=&quot;editNote&quot;&gt;
              Edit
            &lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
        &lt;/v-card&gt;
      &lt;/template&gt;
  
      &lt;v-dialog v-model=&quot;imageDialog&quot; width=&quot;500&quot;&gt;
        &lt;v-img :src=&quot;selectedImage&quot; @click=&quot;imageDialog = false&quot;&gt;&lt;/v-img&gt;
      &lt;/v-dialog&gt;
      &lt;v-dialog v-model=&quot;deleteDialog&quot; width=&quot;500&quot;&gt;
        &lt;h4 style=&quot;text-align: center&quot; class=&quot;pa-5&quot;&gt;
          Are you sure you want to delete {{ note.title }}?
        &lt;/h4&gt;
        &lt;v-btn color=&quot;red darken-1&quot; text @click=&quot;deleteNote()&quot;&gt; Delete &lt;/v-btn&gt;
        &lt;v-btn color=&quot;blue darken-1&quot; text @click=&quot;deleteDialog = false&quot;&gt;
          Close
        &lt;/v-btn&gt;
      &lt;/v-dialog&gt;
      &lt;v-dialog v-model=&quot;youtubeDialog&quot; width=&quot;500&quot;&gt;
        &lt;iframe
          id=&quot;ytplayer&quot;
          type=&quot;text/html&quot;
          width=&quot;500&quot;
          height=&quot;400&quot;
          :src=&quot;youtubeSrc&quot;
          frameborder=&quot;0&quot;
        &gt;&lt;/iframe&gt;
      &lt;/v-dialog&gt;
    &lt;/v-dialog&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { EventBus } from &quot;../event-bus&quot;;
  export default {
    props: {
      note: Object,
    },
  
    data: () =&gt; {
      return {
        dialog: false,
        imageDialog: false,
        deleteDialog: false,
        selectedImage: &quot;&quot;,
        youtubeDialog: false,
        youtubeSrc: &quot;&quot;,
      };
    },
    mounted() {
      EventBus.$on(&quot;openNoteView&quot;, (noteID) =&gt; {
        if (this.note.uuid === noteID) {
          return this.openNoteView();
        }
      });
    },
    methods: {
      openImage(image) {
        this.selectedImage = image;
        this.imageDialog = true;
      },
      deleteNote() {
        EventBus.$emit(&quot;deleteNote&quot;, this.note.uuid);
      },
      editNote() {
        EventBus.$emit(&quot;openNoteForm&quot;);
        this.closeNoteView();
        // To load data after note form is mounted
        setTimeout(() =&gt; {
          EventBus.$emit(&quot;editNote&quot;, this.note);
        }, 200);
      },
      openNoteView() {
        this.dialog = true;
      },
      closeNoteView() {
        this.dialog = false;
      },
      detectYoutubeClick(e) {
        if (e.target.innerText.includes(&quot;youtube&quot;)) {
          const url = e.target.innerText.replace(&quot;watch?v=&quot;, &quot;embed/&quot;);
          this.youtubeSrc = !url.includes(&quot;http&quot;) ? &quot;https://&quot; + url : url;
          this.youtubeDialog = true;
        }
      },
    },
    computed: {
      convertedText: function () {
        const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
        return this.note.text.replace(urlRegex, function (url, b, c) {
          const url2 = c == &quot;www.&quot; ? &quot;http://&quot; + url : url;
          if (url2.includes(&quot;youtube&quot;)) {
            return `&lt;span class=&quot;youtube_url&quot;&gt;${url}&lt;/span&gt;`;
          } else {
            return '&lt;a href=&quot;' + url2 + '&quot; target=&quot;_blank&quot;&gt;' + url + &quot;&lt;/a&gt;&quot;;
          }
        });
      },
    },
    watch: {
      youtubeDialog: function (newVal) {
        if (newVal === false) this.youtubeSrc = &quot;&quot;;
      },
    },
    beforeDestroy() {
      EventBus.$off(&quot;openNoteView&quot;, this.openNoteView);
    },
  };
  &lt;/script&gt;
  
  &lt;style lang=&quot;scss&quot; &gt;
  .text__container {
    height: 50vh;
    p {
      width: 100%;
    }
  }
  .note__images {
    margin-left: 5px !important;
  }
  .note_card {
    border: 1px solid black !important;
  }
  .theme--dark.v-card .v-card__title {
    color: black !important;
  }
  .theme--dark.v-card .v-card__subtitle.note__subtitle {
    color: black !important;
  }
  .theme--light.v-card .v-card__subtitle.note__subtitle {
    color: white !important;
  }
  .read_only_note.theme--dark {
    .v-card__subtitle {
      color: white !important;
      display: flex;
      flex-wrap: wrap;
    }
    .tag_span {
      background-color: white;
      color: black !important;
      padding: 2px;
      border-radius: 3px;
      margin: 5px;
    }
  }
  .read_only_note.theme--light {
    .v-card__subtitle {
      display: flex;
      flex-wrap: wrap;
    }
    .tag_span {
      color: white !important;
      background-color: #212121;
      padding: 2px;
      border-radius: 3px;
      margin: 5px;
    }
  }
  .youtube_url {
    text-decoration: underline;
    &amp;:hover {
      cursor: pointer;
    }
  }
  &lt;/style&gt;
  </code></pre>
  <p>My spec file</p>
  <pre><code>import Vue from 'vue';
  Vue.use(Vuetify);
  import Vuetify from 'vuetify';
  import NoteForm from '@/components/NoteForm';
  import Note from '@/components/Note';
  import { createLocalVue, mount } from '@vue/test-utils';
  
  describe('NoteForm.vue', () =&gt; {
    const localVue = createLocalVue();
    localVue.use(Vuetify);
    document.body.setAttribute('data-app', true);
    let vuetify;
  
    beforeEach(() =&gt; {
      vuetify = new Vuetify();
    });
  
    it('should emit an event when the action v-btn is clicked', async () =&gt; {
      const formWrapper = mount(NoteForm, {
        localVue,
        vuetify,
      });
  
      const noteWrapper = mount(Note, {
        localVue,
        vuetify,
      });
  
      formWrapper.vm.$emit('closeNoteForm');
      await formWrapper.vm.$nextTick(); // Wait until $emits have been handled
      expect(formWrapper.emitted().closeNoteForm).toBeTruthy();
      expect(noteWrapper.find('.read_only_note').isVisible()).toBe(true);
  
    });
  });
  </code></pre>
  <p>However im getting the error</p>
  <pre><code> [Vue warn]: Error in render: &quot;TypeError: Cannot read property 'title' of undefined&quot;
      
      found in
      
      ---&gt; &lt;Anonymous&gt;
             &lt;Root&gt;
  
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      TypeError: Cannot read property 'title' of undefined
          at Proxy.render (/Users/ozansozuoz/Downloads/vue-notebook/src/components/Note.vue:199:832)
          at VueComponent.Vue._render (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
          at VueComponent.updateComponent (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4054:21)
          at Watcher.get (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at new Watcher (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
          at mountComponent (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.&lt;anonymous&gt;.Vue.$mount (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
          at init (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
          at createComponent (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
          at createElm (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
          at VueComponent.patch [as __patch__] (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
          at Watcher.get (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
          at new Watcher (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
          at mountComponent (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.&lt;anonymous&gt;.Vue.$mount (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
          at mount (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/@vue/test-utils/dist/vue-test-utils.js:13977:21)
          at Object.&lt;anonymous&gt; (/Users/ozansozuoz/Downloads/vue-notebook/tests/unit/example.spec.js:24:25)
          at Object.asyncJestTest (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
          at /Users/ozansozuoz/Downloads/vue-notebook/node_modules/jest-jasmine2/build/queueRunner.js:43:12
          at new Promise (&lt;anonymous&gt;)
          at mapper (/Users/ozansozuoz/Downloads/vue-notebook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
          at /Users/ozansozuoz/Downloads/vue-notebook/node_modules/jest-jasmine2/build/queueRunner.js:73:41
          at processTicksAndRejections (internal/process/task_queues.js:93:5)
  
   FAIL  tests/unit/example.spec.js
    NoteForm.vue
      ✕ should emit an event when the action v-btn is clicked (501ms)
  
    ● NoteForm.vue › should emit an event when the action v-btn is clicked
  
      TypeError: Cannot read property 'title' of undefined
  
        197 | }
        198 | .read_only_note.theme--dark {
      &gt; 199 |   .v-card__subtitle {
            |                                          ^
        200 |     color: white !important;
        201 |     display: flex;
        202 |     flex-wrap: wrap;
  
        at Proxy.render (src/components/Note.vue:199:832)
        at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
        at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:21)
        at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
        at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
        at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
        at VueComponent.Object.&lt;anonymous&gt;.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
        at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
        at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
        at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
        at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
        at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
        at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
        at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
        at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
        at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
        at VueComponent.Object.&lt;anonymous&gt;.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
        at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:13977:21)
        at Object.&lt;anonymous&gt; (tests/unit/example.spec.js:24:25)
  
  </code></pre>
  <p>I don't understand why its pointing to my scss and saying undefined?</p>