React+Firebase单元测试遇auth/invalid-api-key错误求解决及教程

我正在对集成了Firebase Auth、Firestore和Storage的React Web应用开展单元测试，作为新手，网上可参考的资源较少。仅尝试编写简单的断言测试用例，却持续触发auth/invalid-api-key错误。

测试代码 #

import * as firebase from "@firebase/rules-unit-testing"

describe("Login Component", () => {
    it("rendered input" , () => {
        expect(true).toBeTruthy();
    })
});

错误信息 #

Test suite failed to run

    FirebaseError: Firebase: Error (auth/invalid-api-key).

      26 | };
      27 | export const storage = app.storage("gs://sftc-development.appspot.com");
    > 28 | export const auth = app.auth();
         |                         ^
      29 | export default app;

      at createErrorInternal (node_modules/@firebase/auth/src/core/util/assert.ts:128:44)
      at _assert (node_modules/@firebase/auth/src/core/util/assert.ts:153:30)

Firebase配置文件（firebase.js） #

import firebase from "firebase/compat/app";
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

const firestore = app.firestore();
export const database = {
    usersRef: firestore.collection('user'),
    portfolioRef: firestore.collection('portfolio'),
    projectTitleRef: firestore.collection('projectTitle'),
    audioRef: firestore.collection('audio'),
    videoRef: firestore.collection('video'),
    imageRef: firestore.collection('image'),
    ascensionRef: firestore.collection('ascensionNumber'),
    regEmailRef: firestore.collection('regEmail')
};
export const storage = app.storage("gs://sftc-development.appspot.com");
export const auth = app.auth();
export default app;

1. 确保测试环境加载正确的环境变量 #

测试运行时，process.env.REACT_APP_FIREBASE_API_KEY未被正确读取是常见原因：

• 若使用Create React App，测试会自动加载.env.test文件，需在项目根目录创建该文件并填入完整的Firebase配置：

  REACT_APP_FIREBASE_API_KEY=你的真实API密钥
  REACT_APP_FIREBASE_AUTH_DOMAIN=你的Auth域名
  REACT_APP_FIREBASE_PROJECT_ID=你的项目ID
  # 其他必要配置项
  

• 自定义Jest环境需安装dotenv包，并在Jest配置文件中引入：

  require('dotenv').config({ path: '.env.test' });
  

2. 单元测试优先Mock Firebase服务 #

直接依赖真实Firebase服务会导致测试不稳定、速度慢，且容易出现环境配置问题。建议用Jest Mock隔离外部依赖：

// 在测试文件顶部Mock firebase模块
jest.mock('../firebase', () => ({
  auth: jest.fn(() => ({
    // 模拟你需要用到的Auth方法，比如登录
    signInWithEmailAndPassword: jest.fn().mockResolvedValue({ user: { uid: 'test-user-123' } })
  })),
  database: {
    usersRef: {
      doc: jest.fn().mockReturnThis(),
      get: jest.fn().mockResolvedValue({ exists: true, data: () => ({ name: '测试用户' }) })
    }
    // 按需模拟其他数据库引用方法
  },
  storage: jest.fn(() => ({
    ref: jest.fn().mockReturnThis(),
    getDownloadURL: jest.fn().mockResolvedValue('https://example.com/test-file.jpg')
  }))
}));

describe("Login Component", () => {
  it("renders input correctly", () => {
    // 编写你的组件渲染测试逻辑
    expect(true).toBeTruthy();
  });
});

3. 验证Firebase配置的正确性 #

检查.env或.env.test中的API密钥是否与Firebase控制台中的密钥完全一致，避免空格、拼写错误或复制不完整的情况。

• Firebase官方测试文档：官方提供的单元测试、规则测试指南，覆盖Auth、Firestore等服务的测试最佳实践。
• React Testing Library + Jest实战教程：专注于React组件测试，包含如何Mock外部依赖（如Firebase）的具体案例。
• 社区实战文章：搜索「React Firebase单元测试」，查看开发者分享的真实项目测试方案，重点学习Mock Firebase服务的实现细节。

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