React单元测试中Firestore连接断开错误解决方案咨询

问题根源 #

单元测试环境通常不允许访问外部云端服务，Firestore客户端尝试连接真实后端失败，就会抛出这类连接错误。必须通过Mock Firestore来解决——单元测试的核心是验证你的代码逻辑，而非依赖真实后端服务的可用性。

两种Mock实现方案 #

方案1：使用Firebase官方测试库@firebase/rules-unit-testing #

这个库专门用于模拟Firestore环境，能复现真实Firestore的核心行为（包括安全规则验证），适合测试涉及Firestore逻辑的复杂场景。

1. 安装依赖：

npm install --save-dev @firebase/rules-unit-testing firebase

2. 测试文件示例：

import { initializeTestEnvironment } from '@firebase/rules-unit-testing';
import { getFirestore, collection, addDoc, getDocs } from 'firebase/firestore';

let testEnv;

beforeAll(async () => {
  testEnv = await initializeTestEnvironment({
    projectId: 'mock-test-project', // 任意填写测试用项目ID，无需真实存在
    firestore: {
      rules: `allow read, write: if true;` // 可自定义测试用安全规则
    }
  });
});

afterAll(async () => {
  await testEnv.cleanup();
});

test('验证Firestore文档操作逻辑', async () => {
  const db = testEnv.unauthenticatedContext().firestore();
  // 执行模拟的Firestore操作
  await addDoc(collection(db, 'test-collection'), { name: 'demo' });
  // 验证结果
  const docsSnap = await getDocs(collection(db, 'test-collection'));
  expect(docsSnap.size).toBe(1);
});

方案2：手动Mock Firestore模块（轻量场景） #

如果你的代码仅调用Firestore基础方法，可直接用测试框架（如Jest）手动Mock对应模块，适合快速验证函数调用逻辑。

Jest环境示例：

// 顶部Mock firestore核心方法
jest.mock('firebase/firestore', () => ({
  getFirestore: jest.fn(() => ({})),
  collection: jest.fn(() => ({})),
  addDoc: jest.fn(() => Promise.resolve({ id: 'mock-doc-123' })),
  getDocs: jest.fn(() => Promise.resolve({
    size: 1,
    docs: [{ data: () => ({ name: 'demo' }) }]
  })),
  // 根据你的代码用到的方法，补充对应的Mock实现
}));

import { addDoc } from 'firebase/firestore';
import { handleAddData } from './your-component';

test('验证Firestore调用逻辑', async () => {
  await handleAddData();
  expect(addDoc).toHaveBeenCalledWith(expect.anything(), { name: expect.any(String) });
});

核心原则 #

单元测试必须隔离外部依赖，真实Firestore属于外部服务，绝对不能在单元测试中直接调用。若需验证端到端流程，应在集成测试中连接专用的测试环境Firestore，而非生产环境。

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