Jest and Angular и следящий за функцией ViewChild

Question

Я использую Spectator, Jest и Angular и пытаюсь проверить, вызывается ли функция @ViewChild.

У меня есть следующая реализация:

describe('CollectiveModalComponent', () => {
  const createComponent = createComponentFactory({
    component: CollectiveModalComponent,
    detectChanges: false,
    shallow: true
  });

 describe('when handling the event', () => {
    beforeEach(() => {
      spectator = createComponent();

      jest.spyOn(component.modal, 'close');
      spectator.detectChanges();
    });

    it('should also close the modal if shouldCloseModal is true in the event', () => {
      // Arrange
      const collective = event();

      // Act
      component.handleEvent({
        object: event,
        shouldCloseModal: true
      });

      // Assert
      expect(component.modal.close).toHaveBeenCalled();
    });
  });
});

Это дает мнеследующие ошибки:

Cannot spy the close property because it is not a function; undefined given instead

TypeError: this.modal.close is not a function

Мой компонент выглядит так:

// left out imports
@Component({
  // left out
})
export class Custom Component implements OnInit, OnDestroy {
  @ViewChild('modal', { static: false }) modal;

  handleEvent(event: CusomtEvent) {
    this.selectedCollectiveEmmiter.emit(event.object);

    if (event.shouldCloseModal) {
      this._close();
    }
  }


  private _close() {
    this.modal.close();
  }
}

Я знаю, что должен создатьшпионить за этим viewChild, но каким образом я могу это сделать?До сих пор я изучал макетирование компонента viewchild с помощью ng-mocks, но я не хочу использовать эту библиотеку, потому что она использует Jasmine, и я больше не хочу никаких зависимостей от Jasmine.

Howя могу решить эту проблему?