Cypress Stub自定义类失效：mainPage.open()未使用Stub值

出现这种现象的核心原因是模块引用时机与Stub作用范围不匹配，常见场景包括：

1. 模块缓存导致实例绑定原始方法：如果mainPage模块在测试Stub执行前就已经导入并引用了MyCustomClass，那么mainPage内部使用的是模块缓存里的原始类方法，后续测试中对类的Stub不会影响已存在的引用。
2. Stub目标错误：测试中Stub的是全局挂载的MyCustomClass（比如window.MyCustomClass），但mainPage里是直接从本地模块导入的MyCustomClass，两者属于不同的引用对象，Stub无法覆盖。
3. 类方法的绑定特性：如果MyCustomClass的实例是在Stub前创建的，实例上的方法已经绑定了原始函数，后续对类静态方法的Stub不会影响已创建的实例。

以下基于你提供的代码结构，给出针对性修复方案：

假设的代码基准（补全你未提供的关键文件） #

MyCustomClass.ts #

export class MyCustomClass {
  static myMethod() {
    return 'original value';
  }
}

mainPage.ts（推测结构） #

import { MyCustomClass } from '../utils/MyCustomClass';

export const mainPage = {
  open() {
    const result = MyCustomClass.myMethod();
    // 业务逻辑
    return result;
  }
};

方案1：动态导入模块，确保Stub优先执行 #

通过延迟导入mainPage，保证Stub先覆盖类方法，再让mainPage引用Stub后的类：

import { MyCustomClass } from '../utils/MyCustomClass';

describe('Stub MyCustomClass', () => {
  let mainPage;

  before(() => {
    // 先Stub类静态方法
    cy.stub(MyCustomClass, 'myMethod').returns('stubbed value');
    // 动态导入mainPage，确保它引用的是Stub后的类
    import('../pages/mainPage').then(module => {
      mainPage = module.mainPage;
    });
  });

  it('should use stubbed value in mainPage.open', () => {
    mainPage.open();
    // 验证逻辑：比如断言页面上显示了stubbed value
    cy.get('.result').should('have.text', 'stubbed value');
  });
});

方案2：统一使用全局类引用 #

修改mainPage直接使用全局挂载的MyCustomClass，让Stub的全局对象能覆盖业务代码的调用：

修改mainPage.ts #

export const mainPage = {
  open() {
    // 改用全局挂载的类引用
    const result = window.MyCustomClass.myMethod();
    return result;
  }
};

测试文件Stub全局类 #

it('should stub global MyCustomClass', () => {
  cy.stub(window.MyCustomClass, 'myMethod').returns('stubbed value');
  
  // 直接调用验证Stub生效
  expect(window.MyCustomClass.myMethod()).to.eq('stubbed value');
  // 调用mainPage.open，内部会使用Stub后的方法
  mainPage.open();
});

方案3：依赖注入重构（最优雅的测试友好方案） #

修改mainPage的结构，通过构造函数传入MyCustomClass，测试时直接传入Stub后的类实例：

修改mainPage.ts #

import { MyCustomClass } from '../utils/MyCustomClass';

export class MainPage {
  constructor(private customClass: typeof MyCustomClass) {}

  open() {
    const result = this.customClass.myMethod();
    return result;
  }
}

// 生产环境默认使用原始类
export const mainPage = new MainPage(MyCustomClass);

测试文件传入Stub对象 #

import { MainPage } from '../pages/mainPage';
import { MyCustomClass } from '../utils/MyCustomClass';

it('should inject stubbed class to mainPage', () => {
  // 创建Stub后的类对象
  const stubbedClass = { ...MyCustomClass };
  cy.stub(stubbedClass, 'myMethod').returns('stubbed value');

  // 传入Stub对象创建测试用的MainPage实例
  const testPage = new MainPage(stubbedClass);
  const result = testPage.open();
  
  expect(result).to.eq('stubbed value');
});

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