如何用Jest测试React Native中notifee.onForegroundEvent前台观察者

原监听代码 #

这是监听前台通知事件的方法：

notifee.onForegroundEvent(({ type, detail }) => {
  switch (type) {
    case EventType.DISMISSED:
      console.log("User dismissed notification", detail.notification?.android);
      break;
    case EventType.PRESS:
      if (detail?.notification?.title?.toLocaleLowerCase().includes('new friend request')) {
        // 此处为点击通知后的处理逻辑
      }
      break;
  }
});

问题 #

我们该如何用Jest对此进行测试？因为该逻辑要求应用处于前台状态。

我的尝试（Mock回调） #

我曾尝试对该回调进行Mock：

jest.mock('@notifee/react-native', () => {
  const mockForeground = jest.fn(),
        mockBackground = jest.fn();
  const EventType = {
    DISMISSED: 0
  };
  return {
    onForegroundEvent: jest.fn().mockImplementationOnce(() => jest.fn().mockResolvedValueOnce({type:EventType.DISMISSED,detail:mockResponse}))
  }
});

正确测试方案 #

1. 修正Notifee模块Mock写法 #

你的Mock逻辑有误，正确的做法是让onForegroundEvent保存传入的回调函数，之后手动触发回调来模拟事件。修改Mock如下：

// 测试文件顶部定义全局Mock变量
let mockOnForegroundEventCallback;
const mockEventType = {
  DISMISSED: 0,
  PRESS: 1
};

jest.mock('@notifee/react-native', () => ({
  onForegroundEvent: jest.fn((callback) => {
    // 保存监听逻辑传入的回调函数
    mockOnForegroundEventCallback = callback;
  }),
  EventType: mockEventType
}));

2. 分场景测试事件逻辑 #

测试DISMISSED事件分支

test('通知被关闭时应打印日志', () => {
  // 引入包含监听逻辑的文件，确保回调被注册
  require('./你的通知监听文件路径');
  
  // Mock console.log方法
  const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
  
  // 构造模拟的通知数据
  const mockDetail = {
    notification: {
      android: { id: 123 }
    }
  };
  
  // 手动触发回调，模拟DISMISSED事件
  mockOnForegroundEventCallback({
    type: mockEventType.DISMISSED,
    detail: mockDetail
  });
  
  // 验证日志是否正确打印
  expect(consoleLogSpy).toHaveBeenCalledWith(
    "User dismissed notification",
    mockDetail.notification.android
  );
  
  // 恢复console.log原始实现
  consoleLogSpy.mockRestore();
});

测试PRESS事件（新好友请求分支）

test('点击新好友请求通知时应执行对应逻辑', () => {
  require('./你的通知监听文件路径');
  
  // 如果点击事件中有具体处理逻辑（比如跳转页面），提前Mock对应函数
  const mockNavigateToFriendRequests = jest.fn();
  jest.mock('./你的导航工具文件', () => ({ 
    navigateToFriendRequests: mockNavigateToFriendRequests 
  }));
  
  // 构造新好友请求的通知数据
  const mockDetail = {
    notification: {
      title: 'New Friend Request'
    }
  };
  
  // 手动触发PRESS事件回调
  mockOnForegroundEventCallback({
    type: mockEventType.PRESS,
    detail: mockDetail
  });
  
  // 验证处理逻辑是否执行
  expect(mockNavigateToFriendRequests).toHaveBeenCalled();
});

核心说明 #

• 无需模拟应用前台状态，直接通过手动调用回调触发逻辑，完全脱离原生环境限制。
• 关键是保存onForegroundEvent传入的回调函数，在测试中主动传入不同事件参数，覆盖所有分支逻辑。
• 测试前必须确保监听代码被执行（通过导入或require文件），保证回调被注册到Mock方法中。

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