angular - 类型错误 : Cannot read property 'get' of undefined (Fixed conflicting imports not working)

Question

尝试运行 karma TS spec 文件时出错。所有模块和导入似乎都工作正常，没有冲突。尝试将 component.ngOninit() 添加到 beforeEach() 和 it() 中，但没有任何成功。查看类似问题与 HttpClientTestingModule 导入冲突或其他提供程序/声明冲突有关。我无法确定为什么 TypeError: Cannot read property 'get' of undefined is not allowing this spec file to pass

规范文件

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

import {AcaPersonComponent} from './aca-person.component';
import {
  MatCardModule, MatDividerModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatOptionModule,
  MatRadioModule,
  MatSelectModule
} from '@angular/material';
import {ReactiveFormsModule} from '@angular/forms';
import {MFGDatePickerModule} from 'mfg-datepicker';
import {TextMaskModule} from 'angular2-text-mask';
import {AppRoutingModule} from '../../../../../app-routing.module';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {LandingPageComponent} from '../../../../../landing-page/landing-page.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AcaPersonComponent,
        LandingPageComponent],
      imports: [MatFormFieldModule,
        ReactiveFormsModule,
        MatIconModule,
        MatInputModule,
        MFGDatePickerModule,
        MatOptionModule,
        MatSelectModule,
        MatRadioModule,
        MatCardModule,
        TextMaskModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        HttpClientTestingModule,
        MatDividerModule
      ]
    })
      .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
    component.ngOnInit();
  });
});

错误

TypeError: Cannot read property 'get' of undefined
    error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-aca-person', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0, bindings: Array, bindingFlags: 0, outputs:  ...
        at <Jasmine>
        at AcaPersonComponent.get type [as type] (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:70:28)
        at AcaPersonComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:24:14)
        at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:31909:1)
        at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44366:1)
        at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44305:1)
        at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45327:36)
        at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45270:1)
        at Object.eval [as updateDirectives] (ng:///DynamicTestModule/AcaPersonComponent_Host.ngfactory.js:7:5)
        at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:45258:1)
        at checkAndUpdateView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:44270:1)
    TypeError: Cannot read property 'get' of undefined
        at <Jasmine>
        at AcaPersonComponent.get type [as type] (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:70:28)
        at AcaPersonComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.ts:24:14)
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/aca/aca-stepper/aca-steps/aca-step-2/aca-person/aca-person.component.spec.ts:58:15)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
        at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
        at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)
        at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:554:1)
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:569:1)
        at <Jasmine>

TS 类

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormGroup, Validators} from '@angular/forms';
import {merge} from 'rxjs';

@Component({
  selector: 'app-aca-person',
  templateUrl: './aca-person.component.html',
  styleUrls: ['./aca-person.component.css']
})
export class AcaPersonComponent implements OnInit {

  @Input() personType: string;
  @Input() peopleForm: FormGroup;
  @Input() nextWasClicked: boolean;
  @Input() index: number;
  @Output() removePerson = new EventEmitter<boolean>();
  cardTitle: string;
  personAge: number;

  constructor() {
  }

  ngOnInit() {
    if (this.type.value == 'primary') {
      this.cardTitle = 'Your Information';
    } else if (this.type.value == 'spouse') {
      this.cardTitle = 'Spouse';
    } else if (this.type.value == 'dependent') {
      this.cardTitle = 'Dependent';
    }
    this.dobAndIsPregnantVC();
  }

  dobAndIsPregnantVC() {
    merge(
      this.dob.valueChanges,
      this.gender.valueChanges
    )
      .subscribe(() => {
        this.calculateAge(this.dob.value);
        if (this.gender.value == 'F') {
          this.is_pregnant.setValidators(Validators.required);
          if (this.personAge < 14) {
            this.is_pregnant.setValue(null);
            this.is_pregnant.clearValidators();
          }
        } else {
          this.is_pregnant.setValue(null);
          this.is_pregnant.clearValidators();
        }
        this.is_pregnant.updateValueAndValidity();
      });
  }

  // Calculate the age of the client from their birth date to display in the census details
  private calculateAge(date: string) {
    if (date) {
      const timeDiff = Math.abs(Date.now() - new Date(date).getTime());
      this.personAge = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25);
    }
  }

  onRemovePerson() {
    this.removePerson.emit(true);
  }

  // GETTERS

  get type() {
    return this.peopleForm.get('type');
  }

  get first_name() {
    return this.peopleForm.get('first_name');
  }

  get last_name() {
    return this.peopleForm.get('last_name');
  }

  get gender() {
    return this.peopleForm.get('gender');
  }

  get dob() {
    return this.peopleForm.get('dob');
  }

  get uses_tobacco() {
    return this.peopleForm.get('uses_tobacco');
  }

  get affordable_care() {
    return this.peopleForm.get('affordable_care');
  }

  get is_pregnant() {
    return this.peopleForm.get('is_pregnant');
  }


}

Answer 1

它的发生是因为你的测试用例中没有定义@Input，所以你需要按如下方式创建它:

  beforeEach(() => {
    fixture = TestBed.createComponent(AcaPersonComponent);
    component = fixture.componentInstance;
    component.peopleForm = fb.group({
       type:  ['Other Name', Validators.required],
       first_name: ['f_name', Validators.required],
       //.. and so on for all params
    });
    component.personType = 'Some Type';
    component.nextWasClicked = true;
    component.index = 1; // or whatever is required
    fixture.detectChanges();
  });

这将帮助您定义 this.peopleForm 并且像 this.peopleForm.get('type'); 这样的行不会给出这样的错误

无需添加component.ngOnInit()