如何在Cypress中Mock GooglePay？解决google未定义报错

1. 全局Mock Google Pay基础对象 #

在Cypress的全局支持文件（比如cypress/support/e2e.js）中，提前在测试前定义全局的google对象，避免页面代码执行时报未定义错误：

beforeEach(() => {
  // 模拟Google Pay的核心类结构
  window.google = {
    payments: {
      api: {
        PaymentsClient: class {
          constructor(options) {
            this.environment = options.environment; // 保存环境参数，方便测试断言
          }
          // 根据业务需求模拟所需方法
          isReadyToPay() {
            return Promise.resolve({ result: true }); // 返回模拟就绪状态
          }
          loadPaymentData() {
            return Promise.resolve({
              paymentMethodData: {
                tokenizationData: { token: 'mock-google-pay-token' }
              }
            }); // 返回模拟支付结果
          }
        }
      }
    }
  };
});

2. 测试中监听/替换Mock方法（可选） #

如果需要验证客户端初始化或支付方法的调用逻辑，可以用Cypress的spy或stub来增强Mock：

验证客户端初始化

it('Google Pay客户端初始化正确', () => {
  // 监听PaymentsClient构造函数
  cy.spy(window.google.payments.api, 'PaymentsClient').as('paymentsClient');
  
  cy.visit('/'); // 触发页面加载
  
  // 断言构造函数被调用，且传入正确环境参数
  cy.get('@paymentsClient').should('have.been.calledWith', { environment: 'TEST' });
});

自定义支付返回结果

it('支付流程正确处理Mock返回值', () => {
  // 替换loadPaymentData方法，返回自定义Mock数据
  const customMockToken = 'custom-test-token';
  cy.stub(window.google.payments.api.PaymentsClient.prototype, 'loadPaymentData')
    .resolves({
      paymentMethodData: { tokenizationData: { token: customMockToken } }
    });
  
  // 触发支付操作
  cy.get('[data-testid="google-pay-btn"]').click();
  
  // 断言业务逻辑正确使用了Mock返回的token
  cy.get('@paymentSubmitHandler').should('have.been.calledWith', customMockToken);
});

3. 阻止真实Google Pay脚本加载（可选） #

如果页面的异步脚本会覆盖Mock对象，可以在Cypress配置中拦截真实脚本请求：

在cypress.config.js中添加：

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // 阻止真实Google Pay脚本加载
          launchOptions.args.push('--block-urls=https://pay.google.com/gp/p/js/pay.js');
        }
        return launchOptions;
      });
    }
  }
};

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