Angular 在测试中使用角度谷歌地图时出错

我正在使用“角度材质谷歌地图”组件将地图集成到离子/电容器应用程序中

在我开发应用程序时，映射功能工作得非常好。当我尝试为实现Google Map的组件运行测试文件时，出现以下错误：

Failed: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:202:1)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/google-maps/__ivy_ngcc__/fesm2015/google-maps.js:441:49)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4029:1)
    at instantiateAllDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7964:1)
    at createDirectivesInstances (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7330:1)
    at ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13902:1)
    at HomePage_Template (ng:///HomePage.js:79:9)
    at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7303:1)
    at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:7112:1)
    at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8373:1)

karma.conf.js（这是一种最后的努力，没有运气）

HTML:

这是整个规格文件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { Storage } from '@ionic/storage';

import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { GoogleMapsModule, GoogleMap } from '@angular/google-maps';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule,
        GoogleMapsModule,
        GooglePlaceModule
      ],
      providers: [
        {
          provide: Storage,
          useValue: {
            get: () => 'manual'
          }
        }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从'@ionic/angular'导入{IonicModule}；
从“./home.page”导入{HomePage}；
从'@ionic/Storage'导入{Storage}；
进口{
HttpClientTestingModule，
HttpTestingController
}来自“@angular/common/http/testing”；
从“@angular/googlemaps”导入{GoogleMapsModule，GoogleMap}；
从“ngx google places自动完成”导入{GooglePlacesModule}；
描述（'主页'，（）=>{
让组件：主页；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[主页]，
进口：[
IonicModule.forRoot（），
HttpClientTestingModule，
谷歌地图模组，
GooglePlaceModule
],
供应商：[
{
提供：存储，
使用价值：{
获取：（）=>“手动”
}
}
]
}).compileComponents（）；
fixture=TestBed.createComponent（主页）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
}));
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

我至少可以向您展示如何使用。我有一个存档的存储库和网站，过去使用的是带有标记的谷歌地图

应用程序模块.ts

import { AgmCoreModule } from '@agm/core';

组件的HTML模板

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng" [mapTypeId]="'hybrid'" style="height: 600px;">
    <agm-marker  [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>

lat: number = 41.6600203;
lng: number = -88.7526228;
zoom: number = 15;

---

我至少可以向你展示一下我是如何使用它的。我有一个存档的存储库和网站，过去使用的是带有标记的谷歌地图

应用程序模块.ts

import { AgmCoreModule } from '@agm/core';

组件的HTML模板

<agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng" [mapTypeId]="'hybrid'" style="height: 600px;">
    <agm-marker  [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>

lat: number = 41.6600203;
lng: number = -88.7526228;
zoom: number = 15;

---

我遇到了一个类似的问题，在被困了几天后，我决定我的单元测试不应该关心map组件本身，所以我使用ng mock模拟了GoogleMap、MapInfoWinfow和MapMarker

---

在某种程度上，这为我解决了这个问题。

我遇到了一个类似的问题，在被困了几天后，我决定我的单元测试不应该关心map组件本身，所以我使用ng mock模拟了GoogleMap、MapInfoWinfow和MapMarker

---

在某种程度上，这为我解决了这个问题。

我在开发我的库时遇到了同样的问题。 解决方案是从Google下载JavaScriptAPI文件，将其保存到工作区，然后在运行测试之前配置karma以加载它

看看我的眼睛

这里是

❕ 请注意，这意味着如果Google发布任何破坏性的更改，您可能必须手动重新下载并替换该文件。可能没什么大不了的。只是要记住一些事情

---

我在开发我的库时遇到了同样的问题。 解决方案是从Google下载JavaScriptAPI文件，将其保存到工作区，然后在运行测试之前配置karma以加载它

看看我的眼睛

这里是

❕ 请注意，这意味着如果Google发布任何破坏性的更改，您可能必须手动重新下载并替换该文件。可能没什么大不了的。只是要记住一些事情

---

因此，map的实现是很好的。这只是我得到这个错误的测试文件。我对切换框架持开放态度，但我已经从Cordova maps转移到了angular/components google maps。因此，如果我在测试设置中遗漏了一件小事，我会犹豫是否要再次经历这个过程。我最近从agm/core转向Google Maps的本机angular实现，主要是因为angular 10及以上版本不支持agm/core。我只在单元测试中面临相同的名称空间问题。因此，map的实现很好。这只是我得到这个错误的测试文件。我对切换框架持开放态度，但我已经从Cordova maps转移到了angular/components google maps。因此，如果我在测试设置中遗漏了一件小事，我会犹豫是否要再次经历这个过程。我最近从agm/core转向Google Maps的本机angular实现，主要是因为angular 10及以上版本不支持agm/core。我只在单元测试中面临相同的名称空间问题。