Angular 2 Testing - Issue with RouterLinkWithHref

Question

I am dealing with a testing on a routed component, I am always gettings, I guess a probably have to import some more modules or provide something but I don't manage to make it works properly ? Here below the error and the code...

TypeError: Cannot read property 'subscribe' of undefined
at new RouterLinkWithHref (/node_modules/@angular/router/@angular/router.es5.js:5028:1)
at createClass (/node_modules/@angular/core/@angular/core.es5.js:10926:1)
at createDirectiveInstance (/node_modules/@angular/core/@angular/core.es5.js:10751:22)
at createViewNodes (/node_modules/@angular/core/@angular/core.es5.js:12187:34)
at callViewAction (/node_modules/@angular/core/@angular/core.es5.js:12633:1)
at execComponentViewsAction (/node_modules/@angular/core/@angular/core.es5.js:12542:1)
at createViewNodes (/node_modules/@angular/core/@angular/core.es5.js:12214:1)
at callViewAction (/node_modules/@angular/core/@angular/core.es5.js:12633:1)
at execComponentViewsAction (/node_modules/@angular/core/@angular/core.es5.js:12542:1)
at createViewNodes (/node_modules/@angular/core/@angular/core.es5.js:12214:1)

Here's the code of the testing module

describe('ItemsComponent', () => {
    let component: ItemsComponent;
    let fixture: ComponentFixture<ItemsComponent>;
    let store: Store<any>;
    const mockRouter = {
        navigate: jasmine.createSpy('#/items')
    }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                ReactiveFormsModule,
                ItemsRoutingModule,
                MenuModule,
                MenuBottomModule,
                AutoCompleteModule,
                HttpModule,
                StoreModule.provideStore(reducer),
                RouterStoreModule.connectRouter(),
                StoreDevtoolsModule.instrumentOnlyWithExtension(),
            ],
            declarations: [
                ItemsComponent,
                ItemComponent,
                ItemEditComponent,
            ],
            providers: [
                HistoryService,
                CookieService,
                ItemsService,
                Http,
                ConnectionBackend,
                RouterModule,
                { provide: Router, useValue: mockRouter },
                { provide: Store, useValue: store },
                LoadingService,
                { provide: ActivatedRoute, useValue: mockRouter },
                MessageService,
                LoginService,
                ShopsService,
                LocationStrategy,
            ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ItemsComponent);
        component = fixture.componentInstance;
        store = fixture.debugElement.injector.get(Store)
        fixture.detectChanges();
    });

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

Thanks

`RouterModule` isn't a provider. Either import the `RouterTestingModule` *or* mock the router, activated route, etc. as providers. In general that seems like a lot of stuff you have to set up to test a single component, perhaps it does too many things. — jonrsharpe, Sep 02 '17 at 08:24
I already tried with RouterTestingModule but still the same issue, I mocked the router in my code above, but is it the right way to do ? — Laurent B, Sep 02 '17 at 08:50
I ran into the same thing with a component where I was mocking `router` like you are doing here and where I had an `` tag with the routerLink attribute in the markup. Check out `RouterTestingModule`. This might be helpful too: https://stackoverflow.com/a/40187305/4530745 — nick, Sep 30 '17 at 00:37

score 2 · Answer 1 · answered Jan 17 '19 at 14:48

I had this same issue today. You are importing somewhere the RoutingModule. Maybe on your own modules there is an import where you are including it.

Remove any import to the RoutingModule and include just the RouterTestingModule.

In my code, I was getting this error because I was including both.

Hope it helps

Angular 2 Testing - Issue with RouterLinkWithHref

1 Answers1