如何用Jasmine测试Promise封装的FileReader错误分支？

待测试的Base64转换函数 #

export const fileToBase64 = (file: File | Blob): Promise<any> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

已有测试用例 #

describe('getFileBase64()', () => {
  it('should convert file to base64', async () => {
    const blob = new Blob();
    const result = await getFileBase64(blob);
    expect(result).toBe('data:');
  });

  it('should reject', async () => {
    ???
  });
});

错误分支测试方案 #

要覆盖reader.onerror分支，需要手动模拟FileReader触发错误事件的场景，具体实现如下：

describe('getFileBase64()', () => {
  // 注意：如果原函数名是fileToBase64，这里测试的函数名要保持一致，避免笔误
  it('should convert file to base64', async () => {
    const blob = new Blob();
    const result = await fileToBase64(blob);
    expect(result).toBe('data:');
  });

  it('should reject when FileReader encounters an error', async () => {
    const mockError = new Error('File read failed');
    let readerInstance: any;

    // 拦截FileReader构造，返回带方法和事件钩子的模拟实例
    spyOn(window, 'FileReader').and.callFake(() => {
      readerInstance = {
        readAsDataURL: jasmine.createSpy('readAsDataURL'),
        onerror: null
      };
      return readerInstance;
    });

    // 启动转换Promise但暂不等待
    const conversionPromise = fileToBase64(new Blob());

    // 手动触发FileReader的error事件
    readerInstance.onerror(mockError);

    // 验证Promise是否按预期抛出错误
    await expectAsync(conversionPromise).toBeRejectedWith(mockError);
  });
});

说明 #

• 通过spyOn(window, 'FileReader').and.callFake()拦截原生FileReader的构造逻辑，返回一个可控的模拟实例
• 保存模拟实例的引用，在启动转换Promise后手动调用onerror方法传入模拟错误，触发函数的reject分支
• 使用expectAsync配合toBeRejectedWith可以精准验证Promise的拒绝结果

内容的提问来源于stack exchange，提问作者W. Zhong