使用cypress-firebase模块登录时出现firebase undefined报错如何解决？

• 依赖缺失：仅安装了服务端使用的firebase-adminSDK，未安装前端测试场景需要的firebase客户端SDK，导致导入的firebase/app模块没有有效导出内容。
• 版本不兼容：当前使用的cypress-firebase@^2.0.0适配Firebase v9的模块化API，你使用的是Firebase v8的命名空间导入语法，而Firebase v9默认不再提供firebase全局命名空间的默认导出，因此import firebase from "firebase/app"拿到的返回值为undefined，调用initializeApp方法自然抛出类型错误。

提供两种适配方案，可根据需求选择：

方案1：使用Firebase v9模块化API（推荐） #

1. 安装匹配版本的Firebase客户端SDK

npm install firebase@^9.0.0

2. 修改cypress/support/command.js代码，适配模块化语法

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";
import { getFirestore } from "firebase/firestore";
import { attachCustomCommands } from "cypress-firebase";

const fbConfig = {
  // 填入你的Firebase项目配置参数
}

const firebaseApp = initializeApp(fbConfig);

attachCustomCommands({
  Cypress,
  cy,
  firebaseApp,
  getAuth,
  getDatabase,
  getFirestore
});

方案2：使用Firebase v9兼容层，无需调整原有逻辑 #

如果不想修改原有代码写法，可直接使用v9提供的v8兼容包，改动量极小：

1. 同样先安装Firebase v9客户端SDK

npm install firebase@^9.0.0

2. 仅调整导入路径为compat版本即可，其余代码保持不变

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/firestore";
import { attachCustomCommands } from "cypress-firebase";

const fbConfig = {
  // 填入你的Firebase项目配置参数
}

firebase.initializeApp(fbConfig);

attachCustomCommands({ Cypress, cy, firebase });

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