如何使用Cypress测试依赖Google Maps等外部资源的组件

你遇到的加载失败问题核心是Google Maps脚本属于异步加载资源，你当前的测试用例没有等待脚本加载完成就执行后续逻辑，Cypress组件测试的隔离环境也会在每次测试运行时重置全局上下文，导致组件内动态注入的脚本还没完成挂载，地图初始化逻辑就已经执行了。

方案1：在测试用例中增加异步等待逻辑 #

直接修改你的测试代码，等待Google Maps全局对象挂载到window后再执行后续断言：

it('验证Google Maps组件正常渲染', () => {
  mount(myComponent)
  // 最长等待10秒直到window.google对象存在，可根据网络情况调整超时时间
  cy.window().should('have.property', 'google', { timeout: 10000 })
  // 后续可追加地图渲染相关的断言逻辑
  cy.get('[data-testid="map-container"]').should('be.visible')
});

方案2：预加载Google Maps脚本减少测试等待时间 #

如果每次测试都等待组件动态加载脚本耗时过长，可以在Cypress组件测试的全局配置中预注入脚本：

1. 打开cypress/support/component.js文件，添加如下代码：

beforeEach(() => {
  const mapScript = document.createElement('script')
  // 替换为你实际使用的Google Maps脚本地址（含有效API密钥）
  mapScript.src = 'https://maps.googleapis.com/maps/api/js?key=你的API密钥'
  document.head.appendChild(mapScript)
  // 每次测试启动前先完成脚本加载
  cy.window().should('have.property', 'google', { timeout: 15000 })
})

2. 测试用例可简化为：

it('验证Google Maps组件正常渲染', () => {
  mount(myComponent)
  cy.get('[data-testid="map-container"]').should('be.visible')
});

• 请确保组件内的地图初始化逻辑是在脚本加载完成后触发的，正确的组件内加载逻辑示例如下：

let script = document.createElement("script");
script.src = url;
// 监听脚本加载完成事件再执行地图初始化
script.onload = () => {
  // 你的地图初始化代码
  initMap()
}
document.head.appendChild(script);

• Cypress组件测试环境的document.head和普通浏览器页面完全一致，不存在无法挂载脚本的问题，90%以上的同类报错都是因为未等待异步资源加载完成导致的。

内容的提问来源于stack exchange，提问作者Vlad Vladimir Hercules