Angular 4单元测试出现afterAll抛出[object ErrorEvent]错误求助

我之前帮不少开发者排查过AGM（Angular Google Maps）在单元测试里的这类问题，这个An error was thrown in afterAll\n[object ErrorEvent]错误，通常是因为AGM组件在测试结束后尝试清理Google Maps相关的全局资源，但测试环境没正确初始化这些资源导致的。

下面是几个我亲测有效的解决思路：

• Mock AGM组件与Google Maps全局对象
  单元测试不需要真实渲染Google Maps，直接Mock掉AGM的核心组件（比如AgmMap、AgmMarker）就行。同时要在测试的beforeEach里模拟Google Maps的全局对象，避免AGM调用不存在的API：

  beforeEach(() => {
    // 模拟window.google全局对象
    (window as any).google = {
      maps: {
        Map: jest.fn(),
        Marker: jest.fn(),
        // 按需添加你用到的其他Maps API Mock
      }
    };
    TestBed.configureTestingModule({
      declarations: [YourTargetComponent],
      // 忽略未知组件的模板错误，或者直接提供Mock组件
      schemas: [NO_ERRORS_SCHEMA]
    });
  });
  

• 手动清理测试后的AGM残留资源
  如果Mock方案没解决问题，可以在afterEach里手动清理AGM可能留下的全局监听或DOM元素：

  afterEach(() => {
    // 移除Google Maps添加的全局事件监听
    if ((window as any).google?.maps?.event) {
      (window as any).google.maps.event.clearInstanceListeners(window);
    }
    // 移除组件渲染的地图容器DOM
    const mapContainer = document.querySelector('.agm-map-container-inner');
    if (mapContainer) {
      mapContainer.remove();
    }
  });
  

• 检查测试的异步逻辑处理
  有时候这个错误是因为测试里的异步操作没完成，导致afterAll执行时还有未处理的Promise。确保你的测试用async/await或者fakeAsync正确处理异步逻辑：

  it('should render map component correctly', fakeAsync(() => {
    fixture.detectChanges();
    tick(); // 触发所有待处理的异步操作
    expect(...).toBeTruthy();
  }));
  

另外，你的控制台截图里应该还有更详细的错误栈信息，如果上面的方法没解决问题，可以把错误栈里的具体内容贴出来，能帮你更精准定位问题。

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