使用 AGM 在页面上创建单元测试时出现“异步功能未在 5000 毫秒内完成”

Question

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

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

<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)

我的测试是ionic的默认测试（刚刚添加了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 秒才能完成？

我收到超时 - 异步回调未在 jasmine.DEFAULT_TIMEOUT_INTERVAL 指定的超时内调用错误

Answer 1

我认为它卡在了

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();
  }));