Ionic/Angular单元测试模拟Storage报this.storage.ready不是函数怎么解决

• 错误使用useValue配置类类型的依赖：useValue会直接将传入的值作为注入实例，你当前传入的是StorageMock类构造函数本身，而非类的实例，因此注入到组件中的storage对象是构造函数，没有挂载ready等原型方法，才会报方法不存在的错误。
• StorageMock的vals属性未初始化：默认值为undefined，后续调用get/set方法操作this.vals时会抛出类型错误。

第一步：完善StorageMock实现 #

补充vals属性的初始化，同时修正ready方法的返回值类型匹配：

export class StorageMock {
  driver: string;
  // 初始化存储对象
  vals: Record<string, any> = {};

  constructor() {}

  clear() {
    return new Promise<void>((res) => res())
  }

  ready() {
    // 传入符合LocalForage类型的空对象即可，无实际业务逻辑可直接断言类型
    return new Promise<LocalForage>((res) => res({} as LocalForage))
  }

  get(key: string) {
    return new Promise((res) => res(this.vals[key]))
  }

  set(key: string, val: any) {
    return new Promise((res) => {
      this.vals[key] = val;
      res()
    })
  }

  remove(key: string) {
    return new Promise((res) => {
      delete this.vals[key];
      res()
    })
  }
}

第二步：修正测试模块的Provider配置 #

将useValue替换为useClass，Angular测试运行时会自动实例化StorageMock作为注入实例：

providers: [
  CheckInsProvider,
  WeighInsProvider,
  PurchasesService,
  TransactionsProvider,
  // 替换useValue为useClass
  {provide: Storage, useClass: StorageMock},
  {provide: GlobalsService, useValue: mockGlobalsService}
]

如果需要手动控制实例的创建，也可以保留useValue直接传入实例：
{provide: Storage, useValue: new StorageMock()}

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