Question

运行ng test时收到此错误消息：

Chrome 80.0.3987 (Windows 10.0.0) ProfileComponent should be created FAILED
TypeError: Cannot read property 'subscribe' of undefined
        error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33800193, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({
 nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 245760, directChildFlags: 245760, childMatchedQueries: 0, matchedQueries: Object({  }
), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-profile', attrs: [  ], template: null, c
omponentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 245760, childFlags: 0, directChil
dFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0, bindings: Array, bindingFlags: 0, outputs: Array ...
            at <Jasmine>
            at new CertificationService (http://localhost:9876/_karma_webpack_/src/app/components/cts/services/certification.service.ts:66:3)
            at _createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30472:1)
            at _createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30426:1)
           ...

我的测试：

describe('ProfileComponent', () => {
  let component: ProfileComponent;
  let fixture: ComponentFixture<ProfileComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule, FormsModule,HttpClientModule ],
      declarations: [ ProfileComponent,CertificationsComponent ,NumericOnlyDirective ],
      providers: [
        PrService,
        UsService,
        InService,
        CertificationService,
        HttpClient,
        CookieService
      ]
    })
    .compileComponents();
  }));

  it('should be created', done=>inject([UsService,HttpClient,CookieService,PrService,CertificationService],
    async (usService: UsService,http: HttpClient, cookieService: CookieService,prService: PrService,certificationService:CertificationService,inService: InService) => {
      const response = {};
      const a: BehaviorSubject<any> = new BehaviorSubject(response);
      spyOn(usService, 'getObsU').and.returnValue(a.asObservable());
      spyOn(cookieService, 'get').and.returnValue('aasdf');
      spyOn(prService, 'getResponseObs').and.returnValue(a.asObservable());
      spyOn(prService, 'getPrObs').and.returnValue(a.asObservable());
      spyOn(inService, 'getIn').and.returnValue(a.asObservable());

      fixture = TestBed.createComponent(ProfileComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      expect(component).toBeTruthy();
      done();
  })());
});

这是组件的初始构造函数：

  constructor(
    private prService: PrService,
    private inService: InService,
    private certificationService: CertificationService,
    private usService: UsService
  ) {
    this.prService.getPrObs().subscribe(p=> {
        this.p= p;
      }
    });
    this.prService.getResponseObs().subscribe(apiResponse => {
      this.serviceResponse = apiResponse
    });
    this.inService.getIn().subscribe(reasons => {
      this.reasons = reasons
    });
    this.usService.getObsU().subscribe( u => {
      this.u = u;
    });
  }

  ngOnInit() {
    this.formErrors = [];
    this.showCertifications = false;
    if (!this.currentProfile) {
      this.formSsn = '';
      this.resetForm();
    } else {
      this.setProfile(this.currentProfile);
    }
  }

我曾经尝试过使用模拟服务，但这会给我同样的错误/其他错误，指出方法不存在。该组件还有一个子组件CertificationsComponent。我进行此测试只是为了使默认组件创建成功。它显示4次错误，对于profile组件两次，对于认证组件两次。他们都在新的CertificationService上说。

Answer 1

所以我用ngentest来自动生成一个有效的测试，它就可以了。在这里：

所有模拟服务都位于顶部，如下所示：

@Injectable()
class MockUsService {
  getObsU= function() {
    return observableOf({});
  };
}

其余：

describe('ProfileComponent', () => {
  let fixture;
  let component;
  const matDialogRefStub = {};

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule, ReactiveFormsModule,OverlayModule,MatDialogModule  ],
      declarations: [
        ProfileComponent,
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
      providers: [
        { provide: PrService, useClass: MockPrService },
        { provide: InService, useClass: MockInService },
        { provide: CertificationService, useClass: MockCertificationService },
        { provide: UsService, useClass: MockUsService },
        {provide: MatDialogRef, useValue: matDialogRefStub},
        MatDialog
      ]
    }).overrideComponent(ProfileComponent, {

    }).compileComponents();
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.debugElement.componentInstance;
  });

  afterEach(() => {
    component.ngOnDestroy = function() {};
    fixture.destroy();
  });

  it('should run #constructor()', async () => {
    expect(component).toBeTruthy();
  });
  it('should run #ngOnInit()', async () => {
    component.ngOnInit();
  });

角组件测试TypeError：无法读取未定义的属性“订阅”

1 个答案: