如何在Cypress中模拟Firebase函数解决测试环境API key缺失报错

问题原因 #

你当前的Stub逻辑存在类型匹配错误：
useAuthState 是 react-firebase-hooks/auth 包提供的Hook，它的入参要求是firebase.auth()返回的Auth实例对象，[user, loading, error]是useAuthState执行后的返回值，你直接让firebase.auth()返回三个undefined的数组，不符合入参的结构要求，因此会持续报错。

修正方案 #

第一步：Stub Firebase核心方法 #

先保证Firebase基础调用不会因为缺少密钥报错，模拟的返回值只要符合SDK结构要求即可：

beforeEach(() => {
  // 模拟初始化方法，返回空应用对象即可
  cy.stub(firebase, 'initializeApp').returns({});
  // 模拟auth方法，返回空的Auth实例对象，不需要实际功能
  cy.stub(firebase, 'auth').returns({});
});

第二步：单独Stub useAuthState Hook #

直接模拟第三方Hook的返回值，不需要处理Firebase Auth内部的状态逻辑，适配不同测试场景更灵活：

// 测试文件顶部先导入目标包
import * as ReactFirebaseAuthHooks from 'react-firebase-hooks/auth';

// 在beforeEach中添加对Hook的Stub
beforeEach(() => {
  // 前面的Firebase Stub保留，新增下面这行
  cy.stub(ReactFirebaseAuthHooks, 'useAuthState').returns([
    undefined, // user字段：模拟未登录状态，需要测试登录态可替换为{uid: 'test-uid', email: 'test@test.com'}这类自定义用户对象
    false, // loading字段：模拟加载完成，需要测试加载态可改为true
    undefined // error字段：模拟无报错，需要测试异常场景可替换为new Error('自定义错误信息')
  ]);
});

如果需要切换不同的测试场景，直接修改useAuthState的返回值即可，不需要调整Firebase相关的Stub逻辑。

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