title: Vue component testing with Jest error, TypeError: Cannot read property 'name' of undefined
body: <p>I have a Vue component with the following template below. It receives an object as a prop. First, it is pulled from the backend on <code>created()</code> in <code>Admin.vue</code>, passed as an array to <code>OrderList</code>, looped over, then passed as an individual order to <code>Order</code>. The <code>ShowOrder</code> component in <code>&lt;router-link&gt;</code> displays the individual order on its own page.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template v-if=&quot;order ? order : error&quot;&gt;
    &lt;div class=&quot;order-container -shadow&quot;&gt;
      &lt;div class=&quot;order-number&quot;&gt;
        &lt;p&gt;{{ order.orderId }}&lt;/p&gt;
        &lt;p&gt;{{ order.daySelected }}&lt;/p&gt;
        &lt;p&gt;{{ order.timeSelected }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;customer-info&quot;&gt;
        &lt;h2&gt;{{ order.userInfo.name }}&lt;/h2&gt;
        &lt;p&gt;
          {{ order.userInfo.street }},
          {{ order.userInfo.city }}
        &lt;/p&gt;
        &lt;p v-if=&quot;order.userInfo.apt&quot;&gt;
          {{ order.userInfo.apt }}
        &lt;/p&gt;
        &lt;p&gt;{{ order.userInfo.phone }}&lt;/p&gt;
           ...
           ...
  
            &lt;router-link :to=&quot;{ name: 'ShowOrder', params: { id: order.orderId, order: order }}&quot;
        &gt;Show Details&lt;/router-link
      &gt;
     &lt;/div&gt; 
    &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: &quot;Order&quot;,
    props: {
      order: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    data() {
      return {
        error: &quot;Error&quot;
      };
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  <p>My <code>Order.spec.js</code> is as follows:</p>
  <pre class="lang-js prettyprint-override"><code>const localVue = createLocalVue();
  localVue.use(VueRouter);
  const router = new VueRouter();
  const $route = {
    path: '&quot;/show-order/:id&quot;'
  };
  
  shallowMount(Order, {
    localVue,
    router,
    stubs: [&quot;router-link&quot;, &quot;router-view&quot;]
  });
  
  const mockOrder = {
    orderId: 123,
    chocolateChip: 24,
    oatmeal: 0,
    campfire: 12,
    daySelected: &quot;Wed Jan 27&quot;,
    timeSelected: &quot;2:30 - 3:00&quot;,
    userInfo: {
      apt: &quot;&quot;,
      city: &quot;Port &quot;,
      email: &quot;k@gmail.com&quot;,
      street: &quot; Point Road&quot;,
      phone: &quot;(123)446-1980&quot;,
      name: &quot;Mr.Smith&quot;
    }
  };
  
  describe(&quot;Order.vue&quot;, () =&gt; {
    it(&quot;renders correctly&quot;, () =&gt; {
      const wrapper = shallowMount(Order, {
        localVue,
        propsData: {
          order: mockOrder,
          $route
        }
      });
      console.log(wrapper.html());
      expect(wrapper.element).toMatchSnapshot();
    });
  });
  </code></pre>
  <p>The error I receive looks like this:</p>
  <pre><code> FAIL  tests/unit/Order.spec.js
    ● Test suite failed to run
  
      TypeError: Cannot read property 'name' of undefined
  
        72 |   flex-flow: column wrap;
        73 |   margin-top: 1em;
      &gt; 74 |   transition: all 0.2s linear;
           |                                                             ^
        75 | }
        76 | 
        77 | .order-container:hover {
  </code></pre>
  <p>I can't even get a snapshot test to work. I read many of the other similar questions here with this error, and tried the <code>v-if</code> in the template to wait for the data before the component loads. What is going on here? And if this is an object error, why in the console is there a pointer to my scoped css and not <code>order.userInfo.name</code>?</p>
  <p>I also, tried changing from <code>created()</code> in <code>Admin.vue</code> to <code>mounted()</code>.</p>
  <p>In <code>Order.vue</code>, I tried adding the object to make it reactive based on these <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">Vue docs</a>.</p>
  <pre><code>  data() {
      return {
        error: &quot;Error&quot;,
        orderItem: {}
      };
    },
    mounted() {
      this.orderItem = Object.assign({}, this.order);
      console.log(this.orderItem, &quot;line 65&quot;);
    }
  </code></pre>