首页 > 解决方案 > Angular 10 单元测试 - 组件实例返回未定义

问题描述

我在组件实例上获得未定义的值。在我从 angular 8 升级到 angular 10 之前,它一直在工作。我在测试中唯一改变的是,async() 到 waitForAsync(),因为不推荐使用 async。

 describe('ProtocolInfoComponent', () => {
      let component: ProtocolInfoComponent;
      let fixture: ComponentFixture<ProtocolInfoComponent>;
    
      const mockActivatedRoute = new MockActivatedRoute({
        parent: new MockActivatedRoute({
          params: of({ studyId: 1001 })
        })
      });
    
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [FormsModule,
            AppConfigModule,
            SharedModule,
            HttpClientTestingModule
          ],
          declarations: [ ProtocolInfoComponent ],
          providers: [
            { provide: UserService, useClass: UserServiceStub },
          { provide: APP_CONFIG_STUB, useClass: APP_DI_CONFIG_STUB },
            { provide: StudySetupService, useClass: StudySetupServiceStub },
            { provide: StudyCreateService, useClass: StudyCreateServiceStub },
            { provide: ActivatedRoute, useValue: mockActivatedRoute },
            { provide: Router, useClass: RouterStub }]
          })
          .compileComponents().then(() => {
            AppInjector.setInjector(TestBed.inject(Injector));
          });
      }));
    
      beforeEach(() => {
        console.log('TestBed', TestBed.createComponent(ProtocolInfoComponent));
        fixture = TestBed.createComponent(ProtocolInfoComponent);
        console.log('Fixture',fixture);
        component = fixture.componentInstance;
        console.log('Component',component);
        fixture.detectChanges();
      });
    
      it('should create', () => {
        console.log('=====component=====',component)
        expect(component).toBeTruthy();
      });
    
      it('should have the study', () => {
        expect(component.study).not.toBe(null);
      });
    
      it('should have the responsibiltiies', () => {
        expect(component.responsibilities).not.toBe(null);
        expect(component.orgResponsibilities).not.toBe(null);
      });
});

我在测试中有控制台语句,以查看夹具和组件的值。两者都是未定义的。它适用于其他测试,我对如何解决这个问题有同样的想法。

标签: angularangular10angular-test

解决方案


终于能够想通了。在提供者数组中,提供之一是 useValue 而不是 useClass;

{ provide: APP_CONFIG_STUB, useValue: APP_DI_CONFIG_STUB }

推荐阅读