Angular 角度Firestore测试：snapshotChanges（）不是函数

我正在运行

ng测试

，Karma无法通过

snapshotChanges（）

函数。代码可以工作，但我需要它来测试

其目的是在firestore中更改所有者表时自动更新所有者表。同样，代码按照预期工作并执行，但我需要在运行

ng test

时显示测试通过

下面是代码。该服务处理所有Firebase方法。它在

lookup owner.ts

中被调用，它获取所有所有者并将其显示在一个表中，然后可以在该表上进行搜索

因果报应的错误

TypeError: this.firestore.collection(...).snapshotChanges is not a function
    at OwnerService.fetchOwners (http://localhost:9876/_karma_webpack_/main.js:7293:48)
    at LookupOwnerComponent.getOwners (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/lookup-owner/lookup-owner.component.ts:11:14)
    at LookupOwnerComponent.ngOnInit (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/lookup-owner/lookup-owner.component.ts:21:4)
    at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2521:1)
    at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2492:1)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2443:1)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9422:1)
    at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9521:1)
    at tickRootContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10747:1)
    at detectChangesInRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10772:1)

LookupOwner.Component.TS

import { Component, OnInit } from '@angular/core';
import { DocumentChangeAction } from '@angular/fire/firestore';
import { OwnerService } from 'src/app/Services/owner.service';

@Component({
  selector: 'app-lookup-owner',
  templateUrl: './lookup-owner.component.html',
  styleUrls: ['./lookup-owner.component.css']
})

export class LookupOwnerComponent implements OnInit {

  constructor(public ownerService: OwnerService) { }

  ngOnInit(): void {

    this.getOwners();

    console.log(this.ownerList);

  }

  ownerList: any;
  searchword: string = '';

  getOwners = () =>
    this.ownerService
    .fetchOwners()
    .subscribe(res => (this.ownerList = res));

}

Owner.service.ts

从'@angular/core'导入{Injectable}；
从'@angular/fire/firestore'导入{AngularFirestore}；
从'@angular/forms'导入{FormControl，FormGroup}；
@注射的({
providedIn:'根'
})
导出类所有者服务{
构造函数（私有firestore:AngularFirestore）{}
表单=新表单组({
ownerID:new FormControl（“”），
所有者名称：新表单控件（“”），
所有者电话：新表单控件（“”），
ownerEmail:新表单控件（“”），
})
createOwner（所有者：任意）{
返回新承诺（（解决、拒绝）=>{
这是消防商店
.收款（“所有人”）
.add（所有者）
。然后（res=>{}，err=>reject（err））；
})
}
fetchOwners（）{
返回此.firestore.collection（“所有者”）.snapshotChanges（）；
}
}

---

提前感谢您的帮助

我会模拟

OwnerService

，而不提供它的实际实例

在您的测试床中，执行以下操作：

let mockOwnerService: any;
beforeEach(waitForAsync(() => { // waitForAsync is async in older versions of Angular
  // the first argument of createSpyObj is a general string of the external dependency and the
  // second argument are the public methods that can be mocked
  mockOwnerService = jasmine.createSpyObj('ownerService', ['createOwner', 'fetchOwners']);
  mockOwnerService.createOwner.and.returnValue(Promise.resolve(true)); // up to you how you want to mock
  mockOwnerService.fetchOwners.and.returnValue(of([])); // up to you how you want to mock
  TestBed.configureTestingModule({
    declarations: [LookupOwnerComponent],
    providers: [{ provide: OwnerService, useValue: mockOwnerService }]
  }).compileComponents();
}));

---

从官方文件中查看这一点。应该会有帮助。

谢谢。这是有效的，文档确实有帮助！