Модульный тест с использованием Jest. TypeError: Невозможно прочитать свойство 'getters' из неопределенного - PullRequest
Новая
       61

Модульный тест с использованием Jest. TypeError: Невозможно прочитать свойство 'getters' из неопределенного

0 голосов
/ 07 марта 2020

У меня есть компонент, который я хочу протестировать и использующий Vuex.

Компоненты / Main / Header. vue

<template>
  <v-container fluid grid-list-xl>
    <v-card flat class="header" color="transparent">
      <v-layout align-center justify-start row fill-height class="content">
        <v-flex xs5>
          <v-img :src="avatar" class="avatar" aspect-ratio="1" contain></v-img>
        </v-flex>
        <v-flex xs7>
          <div class="main-text font-weight-black">
            WELCOME
          </div>
          <div class="sub-text">
            {{currentLocation.description}}
          </div>
          <div @click="showStory" class="show-more font-weight-bold"> 
            Explore More
          </div>
        </v-flex>
      </v-layout>
    </v-card>
  </v-container>
</template>

<script>
  import avatar from '../../assets/images/home/avatar.png';

  export default {
    name: 'Header',
    computed: {
      currentLocation() {
        return this.$store.getters.getCurrentLocation;
      },
      avatar() {
        return avatar;
      }
    },
    methods: {
      showStory() {
        this.$router.push( { name: 'Stories',  params: { name: 'Our Story' } });
      }
    }
  }
</script>

и от / test / unit / components / Main / Header.spe c . js

import Vuex from 'vuex'
import { shallowMount, createLocalVue } from "@vue/test-utils"
import Header from "@/components/Main/Header.vue"

const localVue = createLocalVue()
localVue.use(Vuex)

const store = new Vuex.Store({
  state: {
    currentLocation: {
      name: 'this is a name',
      description: "lorem ipsum",
      latitude: '1.123123',
      longitude: '103.123123',
      radius: '5000'
    }
  },
  getters: {
    getCurrentLocation: (state) => state.currentLocation
  }
})

describe('Header', () => {

  const wrapper = shallowMount(Header, {
    store,
    localVue
  })

  it('should render a computed property currentLocation', () => {
    expect(Header.computed.currentLocation()).toBe(store.getters.getCurrentLocation)
  });

});

Я получаю ошибку от вычисленного свойства currentLocation TypeError: Cannot read property 'getters' of undefined

...