Karma error: Cannot set property 'beforePreactivation' of undefined

Question

I am trying to test a component in my Angular 5 app, which uses the @ngrx/router-store, and I was having problems with state being undefined in this selector:

import * as fromRouter from '@ngrx/router-store';

export const selectRouter = (state: AppState) => state.router;

export const selectUrl = createSelector(
  selectRouter,
  (state: fromRouter.RouterReducerState<RouterStateUrl>) => state.state && state.state.url // <--- state here is undefined
);

To overcome this problem, I tried adding the following imports in my TestBed-generated module:

imports: [
  RouterModule.forChild(wizardRoutes),
  StoreModule.forRoot(reducers, {metaReducers}),
  EffectsModule.forRoot([MyEffects, WizardEffects]),
  HttpClientModule,
  StoreRouterConnectingModule.forRoot() // <--- this makes it happier
]

Now, however, I receive the following error in the Karma test browser window:

TypeError: Cannot set property 'beforePreactivation' of undefined at StoreRouterConnectingModule.webpackJsonp../node_modules/@ngrx/router-store/@ngrx/router-store.es5.js.StoreRouterConnectingModule.setUpBeforePreactivationHook (http://localhost:9878/_karma_webpack_/webpack:/node_modules/@ngrx/router-store/@ngrx/router-store.es5.js:169:1)

There is little or no information about testing the router store in the official docs, and I have been unable to find anything on Google.

I know I haven't provided an enormous amount of code, so please let me know what else you need to see and I will add it.

Answer 1

To wire up the Router, you need to import the router via forRoot instead of forChild.

And indeed, you have to import StoreRouterConnectingModule.forRoot to be able to use the router reducer of NgRx.

Try using:

imports: [
  RouterModule.forRoot(wizardRoutes),
  StoreModule.forRoot(reducers, {metaReducers}),
  EffectsModule.forRoot([MyEffects, WizardEffects]),
  HttpClientModule,
  StoreRouterConnectingModule.forRoot()
]