如何在Jest中为firebase.auth()添加Auth属性以实现Mock？

我明白你遇到的困扰了——当你尝试mock Firebase Auth时，firebase.auth.Auth这个静态属性总是找不到，之前把Auth挂在实例上的写法自然行不通，因为**firebase.auth.Auth是属于auth函数本身的静态属性，不是它返回的实例的属性**。

下面给你两种可行的Mock方案，都能完美解决这个问题：

方案一：直接给mock的auth函数添加静态属性 #

这种方式简单直接，适合快速mock：

jest.mock('firebase/app', () => {
  // 先定义mock的auth函数，它返回带有实例方法的对象
  const mockAuthFn = jest.fn(() => ({
    setPersistence: jest.fn().mockResolvedValue(Promise.resolve()),
    // 这里可以添加其他你需要mock的Auth实例方法，比如signInWithEmailAndPassword等
  }));

  // 关键！给auth函数本身添加Auth静态属性
  mockAuthFn.Auth = {
    Persistence: {
      LOCAL: 'LOCAL',
      SESSION: 'SESSION',
      NONE: 'NONE'
    }
  };

  return {
    auth: mockAuthFn
  };
});

方案二：用Class模拟Firebase Auth的结构 #

如果需要更贴近真实Firebase Auth的类结构，可以用Class来写，这样静态属性和实例方法的划分更清晰：

jest.mock('firebase/app', () => {
  // 模拟Auth类，包含实例方法和静态属性
  class MockAuth {
    // 实例方法：setPersistence，返回一个resolved的Promise
    setPersistence = jest.fn().mockResolvedValue();

    // 静态属性：Persistence枚举
    static Persistence = {
      LOCAL: 'LOCAL',
      SESSION: 'SESSION',
      NONE: 'NONE'
    };
  }

  // 模拟firebase.auth()调用，返回MockAuth的实例
  const auth = jest.fn(() => new MockAuth());
  
  // 将MockAuth赋值给auth函数的Auth属性，这样firebase.auth.Auth就能访问到
  auth.Auth = MockAuth;

  return {
    auth: auth
  };
});

测试验证示例 #

写完Mock后，你可以用下面的测试用例验证是否生效：

test('should call setPersistence with LOCAL persistence', async () => {
  const authInstance = firebase.auth();
  await authInstance.setPersistence(firebase.auth.Auth.Persistence.LOCAL);

  // 验证setPersistence被调用，且参数正确
  expect(authInstance.setPersistence).toHaveBeenCalledWith('LOCAL');
  // 验证静态属性能正常访问
  expect(firebase.auth.Auth.Persistence.LOCAL).toBe('LOCAL');
});

为什么之前的写法不生效？ #

你之前把Auth挂在了构造函数的this上，这意味着它是实例属性，只能通过firebase.auth().Auth访问，但实际场景中我们是通过firebase.auth.Auth（直接访问auth函数的属性）来获取的，所以自然会报错未定义。

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