Lỗi khi thực hiện kiểm thử đơn vị Angular

Tôi đang gặp lỗi khi thực hiện kiểm thử đơn vị Angular. Tôi đang cố gắng kiểm thử tạo component. Vui lòng xem file lỗi dưới đây và cho tôi biết tại sao tôi lại gặp vấn đề đó. Tôi cũng đã import các dịch vụ liên quan với các providers và imports cho module.

Lỗi dưới đây được Karma hiển thị trong khi kiểm thử đơn vị. Tôi nghĩ tôi đang thiếu một cái gì đó

TypeError: Cannot read property 'userName' of undefined
at Object.eval [as updateRenderer] (ng:///DynamicTestModule/ProfilePersonalInformationComponent.ngfactory.js:72:38)
at Object.debugUpdateRenderer [as updateRenderer] (webpack:///./node_modules/@angular/core/esm5/core.js?:14909:21)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14023:14)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14327:17)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14019:5)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14327:17)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14019:5)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)

Để giải quyết lỗi trên, tôi đã tạo lớp PersonalInfoStub nhưng nó không hoạt động.

tệp component.spec.ts

describe('ProfilePersonalInformationComponent', () => {
  let component: ProfilePersonalInformationComponent;
  let fixture: ComponentFixture<ProfilePersonalInformationComponent>;
  let personalInfo : PersonalInfo;

  class PersonalInfoStub{
      personalInfo: Subject<any[]> = new Subject<any[]>();



  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({

        imports: [FormsModule, SharedModule, HttpModule, BrowserModule],
      declarations: [ ProfilePersonalInformationComponent ],
      providers: [
        {
           provide: PersonalInfo, useClass: PersonalInfo
        },

        {
            provide: NotificationService, useClass: NotificationService
        },

        {
            provide: LoginService, useClass: LoginService
        },
        {
            provide: ConfigService, useClass: ConfigService
        }

    ],


    })
    .compileComponents();
  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(ProfilePersonalInformationComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
  });

  it('should create', () => {

    expect(component).toBeTruthy();
  });

thông-tin-cá-nhân.ts

export class PersonalInfo {
  userName: string;
}

tệp lớp của thành phần

ProfilePersonalInformationComponent implements OnInit {




  @Input() personalInfo: PersonalInfo;
  @Input() loadingData;
  savingData: boolean;

  passwordHelpTextArray: string[];
  passwordHelpText: string;
  formErrors: any = {
    username: {
      error: '',
      errorMessage: ''
    },
    currentPassword: {
      error: '',
      errorMessage: ''
    },
    newPassword: {
      error: '',
      errorMessage: ''
    },
    verifyNewPassword: {
      error: '',
      errorMessage: ''
    }
  };

  updatedUsername: string = '';
  existingPassword: string = '';
  newPassword: string = '';
  reEnterNewPassword: string = '';

  constructor(private personalInfoService: PersonalInformationService,
    private notificationService: NotificationService) { }

  ngOnInit(): void {
    this.populateInfo();
  }

  populateInfo() {
    setTimeout(() => {
      if (this.loadingData === false) {
        this.updatedUsername = this.personalInfo.userName;
      } else {
        this.populateInfo();
      }

    }, 500);
  }

Mã HTML cho Tên Người Dùng

 <div class="col-sm-2">
        <h3>Username</h3>
        <p>{{personalInfo.userName}}</p>
      </div>
      <div class="col-sm-2">
        <h3>Password</h3>
        <p>********</p>
      </div>

Câu trả lời #1

Bạn nên giả lập dữ liệu của component khi thử nghiệm, đặc biệt là các thuộc tính @Input thường sẽ nhận giá trị từ component cha. Nhưng trong thử nghiệm đơn vị, bạn sẽ phải tự giả lập nó, vì không có component cha nào liên quan.

beforeEach(() => {
    fixture = TestBed.createComponent(ProfilePersonalInformationComponent);
    component = fixture.componentInstance;
    // mock input data
    component.personalInfo = {"userName" : "XYZ"};
    fixture.detectChanges();
});