Как смоделировать window.google в модульном тесте vue.js - PullRequest
Новая
       16

Как смоделировать window.google в модульном тесте vue.js

2 голосов
/ 03 мая 2019

Я пытаюсь протестировать компонент vue, отображающий карту Google

Элемент сценария google include находится где-то в родительском компоненте, и компонент, который я пытаюсь проверить, ссылается на него глобально: 

const googleInstance = window.google

Мои тревожные звонки прозвучали, когда я увидел, что это глобально, но это код, который мне дали, и мне нужно, чтобы мое покрытие было выше!

Код в компоненте получает экземпляр здесь: 

this.map = new googleInstance.maps.Map(mapElement, this.options)

Я получаю много ошибок, начиная с: 

TypeError: Cannot read property 'maps' of undefined

Я пытался добавить googleInstance и google к параметру mocks при мелком монтировании оболочки 

const wrapper = shallowMount(Map, {
  mocks: {
    google: {
      maps: () => {}
    }
  }
})

Ни сработало, и я получил тот же ответ: 

TypeError: Cannot read property 'maps' of undefined

Я пытался: 

global.google = {
  maps: () => {}
}

Это тоже не сработало

Вот упрощенная версия компонента карты, которую я пытаюсь протестировать: 

<template>
<div>
  <div refs="mapLayer" :id="mapName" class="mapLayer" />
</div>
</template>
<script>
const googleGlobal = window.google

export default {
  name: 'Map',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const mapElement = document.getElementById(this.mapName)
      this.map = new googleGlobal.maps.Map(mapElement)
    }
  }
}
</script>

Код был реорганизован, и ранее экземпляр google пришел через магазин Vuex, и мои тесты работали

Другая моя мысль заключалась в том, чтобы вернуть googleInstance из отдельного файла, который я затем мог бы высмеять с помощью jest, но в конечном итоге это просто перенесло проблему в другой файл, который все еще не проверялся бы

Как можно смоделировать значения в моем компоненте или как можно реорганизовать код для проверки?

1 Ответ

2 голосов
/ 06 мая 2019

Проблема в том, что ваше предложение const googleGlobal = window.google исполняется до того, как вы введете макет в тестовый файл.

Из-за этого постоянная googleGlobal равна undefined. Решением для этого может быть определение метода в вашем компоненте, который возвращает глобальную переменную google, и получение ссылки путем вызова этого метода. 

<script>
export default {
    name: 'Map',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    mounted () {
        this.initMap()
    },
    methods: {
        getGoogle() {
            return window.google
        },
        initMap () {
            const googleGlobal = this.getGoogle()
            const mapElement = document.getElementById(this.mapName)
            this.map = new googleGlobal.maps.Map(mapElement)
        }
    }
}
</script>

Затем в тестовом файле вы можете смоделировать window.google, например: 

window.google = {
    maps: { Map: function() {} }
}
...