使用旁观者而不是Angular中的TestBed进行单元测试

Question

在我的Angular应用中，我想使用Spectator，我当前的测试用例通过了TestBed，但是我正在阅读文档并将其转换为使用Spectator。但是我被困住了。 PFB我的代码。谢谢

//通过的测试用例->

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactTriageComponent } from './contact-triage.component';
import { SharedComponentsModule } from 'src/app/shared-components/shared-

components.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  ContactInfoSelectionRequested

,
  ContactInfoRequested
} from 'src/app/actions/actions';
import { StoreModule, Store } from '@ngrx/store';
import { reducers } from 'src/app/reducers/reducers';
import { ContactTriageService } from './contact-triage.service';
import { HttpClientModule } from '@angular/common/http';

describe('ContactTriageComponent', () => {
  let component: ContactTriageComponent;
  let fixture: ComponentFixture<ContactTriageComponent>;
  let store: Store<any>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ContactTriageComponent],
      imports: [
        HttpClientModule,
        SharedComponentsModule,
        BrowserAnimationsModule,
        StoreModule.forRoot(reducers)
      ],
      providers: [ContactTriageService]
    }).compileComponents();
    store = TestBed.get(Store);
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactTriageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(ContactTriageComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain(
      'How can we help you?'
    );
  });

  it('should dispatch ContactInfoRequested and ContactInfoSelectionRequested on AfterViewInit', () => {
    const storeSpy = spyOn(store, 'dispatch');
    component.ngAfterViewInit();
    expect(storeSpy).toHaveBeenCalledWith(new ContactInfoRequested());
    expect(storeSpy).toHaveBeenCalledWith(new ContactInfoSelectionRequested());
  });
});

//我将转换为使用旁观者的方式。请让我知道我要去哪里错了。谢谢

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ContactTriageComponent } from './contact-triage.component';
import { SharedComponentsModule } from 'src/app/shared-components/shared-components.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  ContactInfoSelectionRequested,
  ContactInfoRequested
} from 'src/app/actions/actions';
import { StoreModule, Store } from '@ngrx/store';
import { reducers } from 'src/app/reducers/reducers';
import { ContactTriageService } from '../../services/contact-triage/contact-triage.service';
import { HttpClientModule } from '@angular/common/http';
import { createService } from '@netbasal/spectator';

describe('ContactTriageComponent', () => {
let store: Store<any>;
  const spectator = createService<ContactTriageComponent>({
      imports: [
        HttpClientModule,
        SharedComponentsModule,
        BrowserAnimationsModule,
        StoreModule.forRoot(reducers)
      ],
      providers: [ContactTriageService]
    })

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(ContactTriageComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain(
      'How can we help you?'
    );
  });

  it('should dispatch ContactInfoRequested and ContactInfoSelectionRequested on AfterViewInit', () => {
    const storeSpy = spyOn(store, 'dispatch');
    component.ngAfterViewInit();
    expect(storeSpy).toHaveBeenCalledWith(new ContactInfoRequested());
    expect(storeSpy).toHaveBeenCalledWith(new ContactInfoSelectionRequested());
  });
});