javascript - Vue component testing with Jest error, TypeError: Cannot read property 'name' of undefined

Question

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 created() in Admin.vue, passed as an array to OrderList, looped over, then passed as an individual order to Order. The ShowOrder component in <router-link> displays the individual order on its own page.

<template v-if="order ? order : error">
  <div class="order-container -shadow">
    <div class="order-number">
      <p>{{ order.orderId }}</p>
      <p>{{ order.daySelected }}</p>
      <p>{{ order.timeSelected }}</p>
    </div>
    <div class="customer-info">
      <h2>{{ order.userInfo.name }}</h2>
      <p>
        {{ order.userInfo.street }},
        {{ order.userInfo.city }}
      </p>
      <p v-if="order.userInfo.apt">
        {{ order.userInfo.apt }}
      </p>
      <p>{{ order.userInfo.phone }}</p>
         ...
         ...

          <router-link :to="{ name: 'ShowOrder', params: { id: order.orderId, order: order }}"
      >Show Details</router-link
    >
   </div> 
  </template>
<script>
export default {
  name: "Order",
  props: {
    order: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      error: "Error"
    };
  }
};
</script>

My Order.spec.js is as follows:

const localVue = createLocalVue();
localVue.use(VueRouter);
const router = new VueRouter();
const $route = {
  path: '"/show-order/:id"'
};

shallowMount(Order, {
  localVue,
  router,
  stubs: ["router-link", "router-view"]
});

const mockOrder = {
  orderId: 123,
  chocolateChip: 24,
  oatmeal: 0,
  campfire: 12,
  daySelected: "Wed Jan 27",
  timeSelected: "2:30 - 3:00",
  userInfo: {
    apt: "",
    city: "Port ",
    email: "[email protected]",
    street: " Point Road",
    phone: "(123)446-1980",
    name: "Mr.Smith"
  }
};

describe("Order.vue", () => {
  it("renders correctly", () => {
    const wrapper = shallowMount(Order, {
      localVue,
      propsData: {
        order: mockOrder,
        $route
      }
    });
    console.log(wrapper.html());
    expect(wrapper.element).toMatchSnapshot();
  });
});

The error I receive looks like this:

 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;
    > 74 |   transition: all 0.2s linear;
         |                                                             ^
      75 | }
      76 | 
      77 | .order-container:hover {

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 v-if 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 order.userInfo.name?

I also, tried changing from created() in Admin.vue to mounted().

In Order.vue, I tried adding the object to make it reactive based on these Vue docs.

  data() {
    return {
      error: "Error",
      orderItem: {}
    };
  },
  mounted() {
    this.orderItem = Object.assign({}, this.order);
    console.log(this.orderItem, "line 65");
  }

question from:https://stackoverflow.com/questions/65945831/vue-component-testing-with-jest-error-typeerror-cannot-read-property-name-of

Answer 1

You're calling shallowMount() twice: once outside of your test without the mockOrder (and this call is not necessary), and again inside your test with the mockOrder.

// Order.spec.js
shallowMount(Order, { localVue }) // ? no props, but no need for this call

describe("Order.vue", () => {
  shallowMount(Order, {
    localVue,
    propsData: {
      order: mockOrder
    }
  })
})

The first call is causing the error because its order prop defaults to the empty object, so order.userInfo would be undefined, leading to the error for order.userInfo.name.

The solution is to remove the unnecessary first call to shallowMount().