Testing with Jasmine, gives a Failed: Uncaught (in promise): TypeError: Cannot read property 'firstName' of undefined

Question

所以我正在使用茉莉花测试和伊斯坦布尔。我尝试测试一个组件。

我有一个用于创建组件（实例化）的测试用例，如下所示：

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

  beforeEach(async(() => {


    TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule, DossierModule, BrowserModule],
      declarations: [DossierPersonalDataComponent],
      providers: [
        {
          DossierFileService,
          ErrorProcessor,

          provide: DomSanitizer,
          useValue: {
            sanitize: () => 'safeString',
            bypassSecurityTrustHtml: () => 'safeString'
          }
        }
      ]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DossierPersonalDataComponent);
        component = fixture.componentInstance;
      });
  }));


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

我的组件如下所示：

constructor(
    private dossierService: DossierService,
    private route: ActivatedRoute,
    private sanitizer: DomSanitizer,
    private dossierFileService: DossierFileService,
    private errorProcessor: ErrorProcessor,
    private dialog: MatDialog
  ) {
    this.dossierItems = this.route.snapshot.data.dossierItems;
    this.editDossierForm = this.formBuilder.group({});
    this.editDossierForm.disable();

    this.dossier = this.route.snapshot.data.dossier;
    this.dossierItems = route.snapshot.data.dossierItems;
    this.profileImagefile = this.route.snapshot.data.profileImage;

    this.editDossierForm = this.formBuilder.group({
      firstName: this.formBuilder.control(this.dossier.firstName, [Validators.required, Validators.maxLength(255)]),
      lastName: this.formBuilder.control(this.dossier.lastName, [Validators.required, Validators.maxLength(255)]),
      mobile: this.formBuilder.control(this.dossier.mobile, [Validators.maxLength(255)]),
      company: this.formBuilder.control(this.dossier.company, [Validators.maxLength(255)]),
      buddy: this.formBuilder.control(this.dossier.buddy, [Validators.maxLength(255)]),
      supervisor: this.formBuilder.control(this.dossier.supervisor, [Validators.maxLength(255)]),
      dateOfBirth: this.formBuilder.control(this.dossier.dateOfBirth)
    });
  }
  ngOnInit(): void {
    this.editDossierForm.disable();
  }

但是我在 should create 单元测试中仍然遇到这个错误：

DossierPersonalDataComponent > should create
Failed: Uncaught (in promise): TypeError: Cannot read property 'firstName' of undefined
TypeError: Cannot read property 'firstName' of undefined
    at new DossierPersonalDataComponent (http://localhost:9876/_karma_webpack_/src/app/dossier/components/dossier-profile-data/dossier-personal-data/dossier-personal-data.component.ts:69:4)
    at NodeInjectorFactory.DossierPersonalDataComponent_Factory [as factory] (ng:///DossierPersonalDataComponent/ɵfac.js:5:10)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:5641:1)
    at instantiateRootComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12566:1)
    at createRootComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26366:1)
    at ComponentFactory.create (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:33908:1)
    at initComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:3225:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
    at AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:763:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:302:1)

那么我必须改变什么？我的意思是我必须在测试套件中更正什么？还是单元测试？

谢谢。

Answer 1

从导入中删除 RouterTestingModule，因为您不需要它。

您还必须将激活的路线模拟到您想要的。

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

  beforeEach(async(() => {


    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, DossierModule, BrowserModule],
      declarations: [DossierPersonalDataComponent],
      providers: [
          DossierFileService,
          ErrorProcessor,
          {
            provide: ActivatedRoute,
            useValue: {
              snapshot: {
                data: {
                  dossier: {
                    firstName: 'hello',
                    lastName: 'world',
                    mobile: '111-111-1111',
                    company: 'acme',
                    buddy: 'bud',
                    supervisor: 'super',
                    dateOfBirth: '1900-01-01',
                  },
                  dossierItems: [], // mock these to your liking
                  profileImage: '',
                }
              }
            }
          },
        {
          // DossierFileService, These have to be outside of the braces
          // ErrorProcessor,

          provide: DomSanitizer,
          useValue: {
            sanitize: () => 'safeString',
            bypassSecurityTrustHtml: () => 'safeString'
          }
        }
      ]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(DossierPersonalDataComponent);
        component = fixture.componentInstance;
      });
  }));


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

Testing with Jasmine, gives a Failed: Uncaught (in promise): TypeError: Cannot read property 'firstName' of undefined

Testing with Jasmine, gives a Failed: Uncaught (in promise): TypeError: Cannot read property 'firstName' of undefined

javascript

istanbul

karma-jasmine

angular