Cypress.io stubbing函数被忽略 组件调用仍执行原方法问题排查

• 你在Cypress测试代码里导入的./myFile和被测应用代码里导入的属于两个完全隔离的JS运行上下文，你stub测试上下文里的模块导出，根本不会影响应用侧的代码执行。
• 即使上下文一致，ES模块的单个函数导入属于静态绑定，组件导入myMethod后已经拿到了原始函数的本地引用，你后续修改模块导出对象上的myMethod属性，也不会替换组件已经持有的引用。
• 部分场景下ESM的顶层导出是只读属性，直接stub单个导出函数本身就会执行失败，无法生效。

方案1：调整模块导出结构（推荐） #

修改myFile的导出逻辑，将需要stub的方法统一挂载到一个对象上导出：

// ./myFile 调整后代码
export const commonUtils = {
  myMethod() {
    // 原myMethod的逻辑
  }
}

对应调整组件内的调用逻辑：

import { commonUtils } from "./myFile"

function MyComponent(){
   const output = commonUtils.myMethod();
   console.log({output})    

   return <div></div>    
}

如果是Cypress组件测试，直接在mount组件前stub即可：

import * as Parent from "./myFile"
import MyComponent from './MyComponent'

cy.stub(Parent.commonUtils, "myMethod", () => "i was stubbed")
cy.mount(<MyComponent />)

如果是E2E测试，可以将commonUtils挂载到应用的window对象上，测试时通过cy.window()拿到对象后stub：

// 应用侧入口代码加一行
if (window.Cypress) {
  window.commonUtils = commonUtils
}

// 测试代码
cy.window().then(win => {
  cy.stub(win.commonUtils, "myMethod", () => "i was stubbed")
})
cy.visit("/my_component")

方案2：拦截模块请求 #

如果不想修改业务代码，E2E测试场景下可以直接拦截模块的网络请求，替换返回内容里的myMethod逻辑：

// 替换成你应用里myFile.js对应的实际请求路径
cy.intercept('GET', '**/myFile.js', (req) => {
  req.continue(res => {
    res.body = res.body.replace(
      /function myMethod\([\s\S]*?\) {/,
      'function myMethod() { return "i was stubbed";'
    )
  })
})
cy.visit("/my_component")

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