含外部JS依赖的Ionic3项目单元测试：Google Maps未定义问题

我太懂这个问题了！单元测试环境和正常运行的浏览器/模拟器环境完全是两回事——你在index.html里引入的Google Maps脚本，测试时根本不会自动加载；就算你想办法加载了，异步加载的脚本也大概率赶不上测试代码的执行速度，所以才会抛出这个错误。下面给你几个靠谱的解决办法：

方法一：手动模拟google.maps对象（最简单直接） #

既然单元测试不需要真实渲染地图，只需要验证你的业务逻辑，那我们直接在测试文件里模拟出需要的google.maps相关对象就行。

比如在你的测试文件开头添加这段代码：

// 全局声明google对象，模拟核心功能
window.google = {
  maps: {
    LatLng: function(lat, lng) {
      this.lat = () => lat;
      this.lng = () => lng;
    },
    // 如果你的代码用到了Marker、Map等其他类，也可以在这里补充模拟
  }
};

这样测试时执行new google.maps.LatLng(0, 0)就不会报错了，你还能在测试里验证这个实例的经纬度值是否符合预期。

方法二：在测试配置中预加载Google Maps脚本（适合需要部分真实功能的场景） #

如果你确实需要测试和Google Maps真实API交互的逻辑，可以在测试运行器（比如Karma）的配置文件里添加Google Maps的脚本地址，让测试环境提前加载它。

比如在karma.conf.js的files数组里添加：

files: [
  // 保留你已有的其他文件配置
  'http://maps.google.com/maps/api/js?key=[你的密钥]&libraries=drawing,places'
]

不过要注意，Google Maps脚本是异步加载的，你需要在测试里等待它加载完成再执行测试代码。可以用Jasmine的beforeAll结合定时器处理：

beforeAll((done) => {
  // 轮询检查google对象是否加载完成
  const checkLoaded = setInterval(() => {
    if (window.google && window.google.maps) {
      clearInterval(checkLoaded);
      done();
    }
  }, 100);
});

方法三：封装Google Maps依赖（更优雅的长期方案） #

为了让代码更易测试、耦合度更低，你可以把Google Maps的依赖封装成一个服务，然后在测试时注入这个服务的mock版本。

比如创建一个google-maps.service.ts：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GoogleMapsService {
  get LatLng() {
    return google.maps.LatLng;
  }

  // 按需封装其他需要用到的Google Maps API
}

然后在你的组件里注入这个服务来使用：

import { GoogleMapsService } from './google-maps.service';

// ...
constructor(private mapsService: GoogleMapsService) {}

// 使用时
let location = new this.mapsService.LatLng(0, 0);

这样在测试时，你只需要提供一个mock的GoogleMapsService即可：

// 定义mock服务
class MockGoogleMapsService {
  LatLng = function(lat, lng) {
    this.lat = () => lat;
    this.lng = () => lng;
  };
}

// 在测试的providers里替换真实服务
providers: [
  { provide: GoogleMapsService, useClass: MockGoogleMapsService }
]

这种方式让你的代码结构更清晰，后续维护和扩展也更方便。

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