如何在vue.js单元测试中模拟window.google

Question

我正在尝试测试显示Google Map的Vue组件

google include脚本元素位于父组件中的某处，而我要测试的组件是全局引用的：

const googleInstance = window.google

当我看到它是全球性的时，我的警钟响了，但它的代码已经给我了，我需要提高覆盖率！

组件中的代码在此处获取实例：

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

我开始出现许多错误：

const googleInstance = window.google

浅安装包装器时，我尝试将googleInstance和google添加到模拟参数

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

都不起作用，我得到相同的响应：

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

我试过了：

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

那也不起作用

这是我要测试的map组件的简化版本：

<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模拟它，但最终这只是将问题移到了仍然无法测试的另一个文件中

如何模拟组件中的值，或者如何将代码重构为可测试的？

Answer 1

问题是，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() {} }
}