[Vuejs]-Jest giving an UNKNOWN : Cannot read property 'weather' of undefined don't know what is weather

by

1👍

✅

The issue is that you are trying to access a property of a completely undefined value, in this case the prop data. Either use something like v-if to only render/access that value when data is defined and has length:

<template>
  <div class="weather-temp">
    <h1 class="weather-degree">{{ getTemperature }}&#176;</h1>
    <div class="weather-quote">
      <h1 class="weather-quote-1">
        <b v-if="data && data.length">{{ data.weather[0].main }}</b>
      </h1>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: ["data"],
  computed: {
    ...mapGetters(["getTemperature"])
  }
};
</script>

I’d recommend this approach no matter what because you may have moments when data has not fully resolved and you could encounter this same error in production, that is unless you are only rendering Weathertemp in the parent conditionally. Otherwise, you would need to pass prop data using propsData to the test:

it('Renders "store.getters.clicks" in h1', () => {
  const propsData = { data: [{ weather: { main: 42 } }] };
  const wrapper = shallowMount(weatherTemperature, { store, localVue, propsData });
  const temp = wrapper.findAll(".weather-degree");
  expect(temp.text()).toBe(getters.getTemperature().toString());
});
👤Alexander Staroselsky

Leave a comment