Angular+Agm谷歌地图应用单元测试：全局加载谷歌地图JS的位置疑问

我之前在做AGM地图应用的单元测试时，也碰到过一模一样的问题——必须确保Google Maps的JS脚本在测试跑起来前加载完成，不然组件和指令的测试全报错。这里给你两个靠谱的解决方案，亲测有效：

方案一：全局预加载（推荐，一次加载所有测试通用） #

所有Angular测试的入口都是src/test.ts，我们可以在这里做全局的预加载处理，这样所有测试套件启动前，Google Maps JS就已经加载好了。

具体步骤：

1. 打开项目根目录下的src/test.ts文件
2. 替换/添加以下代码：

import { MapsApiLoader } from '@agm/core';
import { TestBed } from '@angular/core/testing';

// 先配置TestBed，让MapsApiLoader能被正常注入
TestBed.configureTestingModule({
  providers: [MapsApiLoader]
});

// 获取加载器实例，触发Google Maps JS加载
const mapsLoader = TestBed.inject(MapsApiLoader);
mapsLoader.load().then(() => {
  console.log('✅ Google Maps JS 已加载完成，开始执行测试');
  // 加载完成后手动启动Karma测试
  (window as any).__karma__.start();
});

// 先阻止Karma自动启动，等加载完成再触发
__karma__.loaded = function() {};

这个思路的核心是先拦截Karma的自动启动逻辑，等MapsApiLoader把Google Maps JS加载完成后，再手动启动测试流程，从根源上解决异步加载的时序问题。

方案二：单测试套件内前置加载 #

如果不想全局改动，也可以在每个需要用到地图的测试文件里，用beforeAll钩子来做前置加载：

import { MapsApiLoader } from '@agm/core';
import { TestBed } from '@angular/core/testing';
import { MapDisplayComponent } from './map-display.component';
import { AgmCoreModule } from '@agm/core';

describe('MapDisplayComponent', () => {
  let mapsLoader: MapsApiLoader;

  // 在所有测试用例执行前完成加载
  beforeAll(async () => {
    await TestBed.configureTestingModule({
      declarations: [MapDisplayComponent],
      imports: [
        // 别忘了配置AGM的API密钥
        AgmCoreModule.forRoot({
          apiKey: '你的测试环境API密钥'
        })
      ],
      providers: [MapsApiLoader]
    }).compileComponents();

    mapsLoader = TestBed.inject(MapsApiLoader);
    await mapsLoader.load(); // 等待脚本加载完成
  });

  beforeEach(() => {
    // 这里创建组件时，Google Maps已经准备就绪了
    const fixture = TestBed.createComponent(MapDisplayComponent);
    fixture.detectChanges();
  });

  it('应该正常渲染地图容器', () => {
    // 你的测试逻辑
  });
});

不过这种方式每个测试套件都会重新加载一次Google Maps JS，测试速度会变慢，所以更推荐全局加载的方案。

额外小提醒 #

• 一定要确保测试环境的AGM配置里有正确的Google Maps API密钥，不然加载会失败；
• 如果碰到加载超时或者跨域问题，可以检查下Karma的配置，确保允许加载Google的CDN脚本（一般默认是允许的）。

内容的提问来源于stack exchange，提问作者gentiane