升级Cypress 10后使用Amplify Auth库遇global未定义错误

核心原因 #

Amplify Auth SDK依赖global全局变量，但Cypress 10的执行环境（包括Node端和浏览器测试端）默认没有这个变量，常规的polyfill位置因为加载时机问题没生效。

可行解决方案 #

1. 在Cypress配置文件中注入Node环境的global变量 #

修改cypress.config.ts，通过before:run钩子在测试启动前为Node环境补上变量：

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:run', () => {
        global.global = global;
      });
    },
  },
})

2. 在支持文件中注入浏览器环境的global变量 #

在cypress/support/e2e.ts（或js）中，通过window:before:load钩子在测试页面加载前注入：

before(() => {
  cy.on('window:before:load', (win) => {
    (win as any).global = win;
  });
});

3. 自定义命令文件中双重兜底 #

在你的Amplify登录扩展文件顶部，同时处理Node和浏览器环境，确保变量在Amplify初始化前存在：

// 处理Node环境（Cypress运行时）
if (typeof global !== 'undefined') {
  (global as any).global = global;
}

// 处理浏览器环境（测试页面）
Cypress.on('window:before:load', (win) => {
  (win as any).global = win;
});

// 你的自定义登录命令
Cypress.Commands.add('amplifyLogin', async (credentials) => {
  // 这里放你的Amplify Auth登录逻辑
  // 例如：await Auth.signIn(credentials.username, credentials.password);
});

4. 确认加载顺序 #

确保自定义命令文件在cypress.config.ts的supportFile中被正确引入，或者在support/e2e.ts里通过import加载，避免Amplify初始化早于变量注入。

为什么之前的方法无效？ #

之前在扩展文件、配置文件或支持文件单独添加polyfill无效，是因为：

• Cypress 10的配置文件中直接添加的代码，执行时机可能晚于自定义命令的加载
• 扩展文件顶部的代码如果只处理了单一环境（比如只处理Node或只处理浏览器），会漏掉另一个环境的变量需求
• window:before:load钩子需要在测试页面加载前绑定，否则Amplify初始化时已经访问了不存在的global变量

内容的提问来源于stack exchange，提问作者jenson-button-event