在具有AGM的页面上创建单元测试时，“异步功能在5000毫秒内未完成”

问题描述

我刚刚为我的ionic + angle应用程序创建了一个带有地图的组件。

这很简单，只需在一个位置显示一个标记：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Spots</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
</ion-content>

和TS文件：

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-map',templateUrl: './map.page.html',styleUrls: ['./map.page.scss'],})
export class MapPage implements OnInit {

  lat = 51.678418;
  lng = 7.809007;
  constructor() { }

  ngOnInit() {
  }

}

它有效，我得到了我的地图。为了进行测试，我必须另外安装@types/googlemaps：

npm install --save-dev @types/googlemaps

但是现在我的测试给了我这个错误：

Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

我的测试是离子（默认添加了AGM模块）的默认测试之一：

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

import { MapPage } from './map.page';

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

  beforeEach(async(() => {
    Testbed.configureTestingModule({
      declarations: [MapPage],imports: [
        IonicModule.forRoot(),AgmCoreModule.forRoot({
          apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',}),],}).compileComponents();

    fixture = Testbed.createComponent(MapPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

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

知道发生了什么吗？我没有太多有关错误的信息，而且我有点丢失了什么异步功能可能尚未完成，什么可能是错误的？是测试吗？还是代码？

修改 如果我只是像这里指定的那样增加超时，它可以工作，但是我不知道需要5秒钟才能完成？

I am getting Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL Error

解决方法

我认为它被卡在beforeEach的第一个compileComponents上。也许它不喜欢这种配置。

添加以下日志以确认可疑之处：

beforeEach(async(() => {
    console.log('In Before Each');
    TestBed.configureTestingModule({
      declarations: [MapPage],imports: [
        IonicModule.forRoot(),AgmCoreModule.forRoot({
          apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',}),],}).compileComponents();
    console.log('In after compile components');
    fixture = TestBed.createComponent(MapPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
    console.log('After calling fixture.detectChanges');
  }));

我认为您不会看到In after compile components，并且我认为您不需要IonicModule.forRoot()。 https://www.joshmorony.com/introduction-to-testing-ionic-2-applications-with-testbed/

如果看不到In after compile components，则说明您的导入或配置有问题。

尝试一下：

import { NO_ERRORS_SCHEMA } from '@angular/core';
....
beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MapPage],schemas: [NO_ERRORS_SCHEMA],// NO_ERRORS_SCHEMA basically says if you don't 
                                  // understand HTML markup,ignore it.
    }).compileComponents();

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