如何在Cypress测试中模拟JSONP请求？

问题根因 #

你使用cy.intercept()模拟失败的核心原因是没有匹配JSONP的响应格式要求：

JSONP的本质是将携带响应结果作为参数的回调函数对应的脚本插入到页面中，返回内容必须是可执行的JS代码，而非纯JSON数据。之前拦截后只返回纯JSON的话，脚本插入页面后无法触发业务代码中绑定的回调函数，自然不会生效。

实现方案 #

你不需要模拟整个window.google对象，按以下步骤用cy.intercept()即可实现无侵入的JSONP模拟：

• 先确认谷歌自动完成JSONP请求的URL特征，通常路径包含/maps/api/place/autocomplete/jsonp，请求会携带动态生成的callback查询参数
• 拦截请求时动态提取callback参数值，将模拟数据用该回调名包裹后返回即可

代码示例 #

// 拦截所有谷歌自动完成JSONP请求
cy.intercept('GET', '**/place/autocomplete/jsonp*', (req) => {
  // 提取请求中动态生成的回调函数名
  const callbackFnName = req.query.callback
  // 模拟和官方接口结构完全一致的返回数据
  const mockResult = {
    predictions: [
      {
        description: "上海市浦东新区",
        place_id: "ChIJWbUeIeBs2jYR708CzZ2a8c0",
        structured_formatting: {
          main_text: "浦东新区",
          secondary_text: "上海市"
        }
      }
    ],
    status: "OK"
  }
  // 构造符合JSONP格式的响应
  req.reply(`${callbackFnName}(${JSON.stringify(mockResult)})`)
})

补充说明 #

如果你需要操作被测页面的window.google对象，不要直接调用Cypress运行环境的全局window，要使用cy.window()获取被测页面的上下文：

cy.window().then(pageWindow => {
  // 此处可获取到被测页面挂载的google对象
  console.log(pageWindow.google)
})

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