TypeScript类层级中私有方法与事件监听器的单元测试问询

针对你给出的Report类，以下是三个测试需求的具体实现思路：

1. 测试addToQueue方法 #

直接访问protected的queue会触发TS类型检查错误，推荐用自定义测试子类的方式合法访问protected成员：

// 定义可测试的子类，暴露protected的queue
class TestableReport extends Report {
  getQueue() {
    return this.queue;
  }
}

describe('addToQueue', () => {
  it('should add a function to the queue', () => {
    const mockFunction = jest.fn();
    const report = new TestableReport();
    report.addToQueue(mockFunction);
    expect(report.getQueue().size).toBe(1);
    expect(report.getQueue()).toContain(mockFunction);
  });
});

这种方式既绕开了TS的访问限制，又符合面向对象的访问规则，比as any更严谨。

2. 测试initializeBatching方法 #

通过jest监听document.addEventListener，验证事件监听器是否被正确添加：

describe('initializeBatching', () => {
  it('should add visibilitychange event listener', () => {
    const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
    const report = new Report();
    
    report.initializeBatching();
    
    expect(addEventListenerSpy).toHaveBeenCalledWith(
      'visibilitychange',
      expect.any(Function)
    );
    addEventListenerSpy.mockRestore();
  });
});

3. 间接测试私有方法flushQueue #

不需要直接调用私有方法，而是通过触发visibilitychange事件，验证其副作用（队列中的回调被执行、队列被清空）：

describe('flushQueue (indirect test)', () => {
  it('should flush queue when document becomes hidden', () => {
    const mockFunction = jest.fn();
    const report = new TestableReport();
    
    report.addToQueue(mockFunction);
    report.initializeBatching();
    
    // 模拟文档变为hidden状态并触发事件
    Object.defineProperty(document, 'visibilityState', { value: 'hidden' });
    document.dispatchEvent(new Event('visibilitychange'));
    
    // 验证回调被执行，队列被清空
    expect(mockFunction).toHaveBeenCalled();
    expect(report.getQueue().size).toBe(0);
  });
});

如果需要更直接验证flushQueue被调用，也可以用jest的spyOn结合类型断言来mock私有方法：

it('should call flushQueue when document is hidden', () => {
  const report = new Report();
  // 类型断言绕过TS对私有方法的检查
  const flushQueueSpy = jest.spyOn(report as any, 'flushQueue');
  report.initializeBatching();
  
  Object.defineProperty(document, 'visibilityState', { value: 'hidden' });
  document.dispatchEvent(new Event('visibilitychange'));
  
  expect(flushQueueSpy).toHaveBeenCalled();
  flushQueueSpy.mockRestore();
});

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