Angular 5 / Google Map - “ReferenceError：google未定义”

Question

我使用一种类型的Angular 5：“@ types / markerclustererplus”：“2.1.28”。此类型会安装@ types / google-maps。

我在“index.html”文件中添加了脚本部分来加载地图。 在我的组件中，我可以使用谷歌命名空间。 这很好。

然而，当我运行测试时......它失败了！ 我得到了“ReferenceError：google未定义”

我尝试了很多东西......如果你有任何想法，我会接受它！

谢谢。

Answer 1

在测试中，您可以使用模拟/存根在google对象上定义window以及组件与之交互的任何其他对象/函数：

window['google'] = {
  maps: {
    Maps: () => {}
  }
};

然后，您可以使用Jasmine Spies拦截对google上maps的给定对象和/或函数的调用，以返回自定义值或您需要的任何其他内容测试你的组件。

const spy = spyOn(window['google']['maps'], 'Maps').and.returnValue({});

原因括号表示法用于取悦TypeScript编译器。使用点表示法，您会看到错误，例如Property 'google' does not exist on type 'Window'。

希望这有助于至少解决您所看到的未定义错误。

谢谢！

Answer 2

谢谢亚历山大！

你给我带来了真正的线索！

发布后，我更深入地研究了角度谷歌模拟。 我终于找到了这个：GoogleMock。 我然后调整它，它的工作原理。

谢谢！