karma TypeError "속성이 '정의되지 않음의 구독'을 읽을 수 없습니다.

Question

공유 서비스가있는 간단한 구성 요소를 테스트하는 동안 다음 오류 메시지가 나타나고 제대로 작동하지 않을 수 있습니다. 모든 것을 시도했습니다!

TypeError: Cannot read property 'subscribe' of undefined

lr.component.ts

export class LrComponent implements OnDestroy { 
    currentRouter: string; 
    private subscription: Subscription; 

    constructor(private lrService: LrService) { 
    this.subscription = this.lrService.lrNavigation$.subscribe(
     (currentNav: string) => { 
     this.currentRouter = currentNav; 
     }, 
     (error) => { 
     console.warn(error); 
     } 
    ); 
    } 

    ngOnDestroy() { 
    if (this.subscription) { 
     this.subscription.unsubscribe(); 
    } 
    } 
} 

lr.service.ts

@Injectable() 
export class LrService { 
    // Observables for our components to subscribe to. 
    lrNavigation$: Observable<string>; 

    // Subjects to return data to subscribed components 
    private lrNavigationSubject = new Subject<string>(); 

    constructor() { 
    this.lrNavigation$ = this.lrNavigationSubject.asObservable(); 
    } 

    // Triggers subscribed components 
    lrNavigate(currentNav: string) { 
    this.lrNavigationSubject.next(currentNav); 
    } 
} 

임의-random.component.ts

,

lr.component.spec.ts

class MockRouter { 
    navigate = jasmine.createSpy('navigate'); 
} 

class MockActivatedRoute { 
    params = jasmine.createSpy('params'); 
} 

class MockLrService extends LrService { 
    lrNavigation$: Observable<string> = new Subject<string>().asObservable(); 

    constructor() { 
    super(); 
    } 

    lrNavigate(currentRouter: string) { 
    return Observable.of(['LR']); 
    } 
} 

export function main() { 
    describe('LrComponent',() => { 
    let fixture: ComponentFixture<LrComponent>; 
    let component: LrComponent; 
    let lrService: LrService; 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
     declarations: [ 
      LrComponent, 
      LrMappingsComponent, 
      LrCategoriesComponent, 
     ], 
     imports: [ 
      RouterTestingModule, 
      CommonModule, 
      LrRoutingModule, 
      SharedModule, 
      AgGridModule.withComponents(
      [ 
       CaseSensitiveFilterComponent, 
       ButtonComponent, 
       ColumnHeaderComponent, 
       TypeaheadEditorComponent, 
       ButtonGroupComponent 
      ] 
     ) 
     ], 
     providers: [ 
      { provide: LrService, useClass: MockLrService }, 
      { provide: Router, useClass: MockRouter }, 
      { provide: ActivatedRoute, useClass: MockActivatedRoute }, 
     ] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(LrComponent); 
     component = fixture.componentInstance; 
     lrService = fixture.debugElement.injector.get(LrService); 
    }); 

    it('should create LrComponent',() => { 
     fixture.detectChanges(); 
     expect(component).toBeDefined(); 
    }); 

    it('should have the current router set', async(() => { 
     fixture.detectChanges(); 
     expect(component.currentRouter).toEqual('LR', 'the data should be `LR`'); 
    })); 
    }); 
} 

ERROR

참고 : 내가 사용하는 경우

만 재스민 Angular 테스트 프레임 워크가 없어도 작동합니다. 하지만 그게 내가 @Component의 시험을하고 싶지 않다.

예 :

export function main() { 
    describe('LrComponent',() => { 
    let fixture: ComponentFixture<LrComponent>; 
    let component: LrComponent; 
    let lrService: LrService; 

    beforeEach(() => { 
     lrService = new MockLrService(); 
     component = new LrComponent(lrService); 
    }); 

    it('should create LrComponent',() => { 
     fixture.detectChanges(); 
     expect(component).toBeDefined(); 
    }); 
    }); 
} 

이 작동하지만, 내가 원하는 것이 아니다.

이 문제를 해결하는 방법에 대한 단서가 있습니까? 나는 많은 것을 시도해 보았지만 어떤 것도 효과가 없었습니다. ...

Answer 1

좋아, 누군가가 똑같은 문제에 직면 할 때를 대비해.

{ provide: Router, useClass: MockRouter } 

이 문제를 해결 :

은 삭제를 밝혀졌습니다. 나는 정말로 이유를 모른다. providers에서 제거하고 그들이 여기에 표시된 작동하게 좋아 주입,

it('should be able to navigate through tabs', 
     fakeAsync((inject([Router, Location], (router: Router, location: Location) => { 
     router.initialNavigation(); 

     let tabLinks, a1, a2; 
     fixture.detectChanges(); 

     tabLinks = fixture.debugElement.queryAll(By.css('a.mappings')); 
     a1 = tabLinks[0]; 
     a2 = tabLinks[1]; 


     a1.triggerEventHandler('click', { button: 0 }); 
     tick(); 
     expect(location.path()).toEqual('lrMappings'); 

     a2.nativeElement.click(); 
     tick(); 
     expect(location.path()).toEqual('categories'); 
     })))); 

을하지만 : 나는

이러한 종속성은 이것 때문에 여기에 있었다 ...는 서비스에서 Observables은 몇 가지 문제가 있었다 확신했다 .