Angular Firestore Testing: snapshotChanges() is not a function

I was running ng test and Karma would not get past the snapshotChanges() function. The code works, but I need it to test.

The purpose is to update a table of owners automatically when it is changed in firestore. Again, the code works and does as it expects, but I am required to show that the test passes when I run ng test.

Below is the code. The service handles all the firebase methods. It gets called in lookup-owner.ts which fetches all the owners and displays them in a table which can then be searched on.

ERROR from Karma

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

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FormControl, FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class OwnerService {

  constructor(private firestore: AngularFirestore) { }

  form = new FormGroup({
    ownerID: new FormControl(''),
    ownerName: new FormControl(''),
    ownerPhone: new FormControl(''),
    ownerEmail: new FormControl(''),
  })

  createOwner(owner: any) {
    return new Promise<any>((resolve, reject) =>{
      this.firestore
        .collection("owners")
        .add(owner)
        .then(res => {}, err => reject(err));
    })
  }

  fetchOwners() {
     return this.firestore.collection("owners").snapshotChanges();
  }

}

Thanks in advance for any help!