CODEWITHSUNDEEP
angulartypescriptkarma-jasmine
Gerald Hughes
Gerald Hughes

Reputation: 6159

"TypeError: Cannot read property 'routeConfig' of null" on Karma-Jasmine for Angular 6

The error I'm getting is "TypeError: Cannot read property 'routeConfig' of null"

I'm importing "RouterTestingModule", but seems some something is not right,not sure what the problem is.

Anyone facing this problem?

Code

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MyComponent } from './my.component';
import { MyService } from '../services/my-service/my.service';
import { RouterTestingModule } from '@angular/router/testing';

  // mock the service
  class MockMyService extends MyService {
    // mock everything used by the component
  };

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [ MyComponent ],
      providers: [{
        provide: MyService,
        useClass: MockMyService
      }]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

MyComponent

@Component({
  selector: "app-action-bar",
  templateUrl: "./action-bar.component.html",
  styleUrls: ["./action-bar.component.css"]
})
export class MyComponent implements OnInit, OnDestroy {
  subscription: Subscription;
  buttons: ActionBarButton[];
  messages: string[] = [];
  componentId: number;

  constructor(
    private myService: MyService,
    private router: Router
  ) {
    this.componentId = (this.router.routerState.root.firstChild.routeConfig
      .data as PageViewModel).Id;
    this.buttons = new Array<ActionBarButton>();
    this.subscription = this.myService.actionBarShow$.subscribe(data => {
      this.setButtons(data);
    });
  }

  ngOnInit() {
    this.messages = this.myService.getMessages();
  }

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

  setButtons(data) {
    this.buttons.push(this.createButton(data));
  }

  createButton(params?: IActionBarButton) {
    let button = new ActionBarButton();
    button.componentId = params.componentId || button.componentId;
    button.type = params.type || button.type;
    button.label = params.label || button.label;
    button.styleClass = params.styleClass || button.styleClass;
    button.func = params.func || button.func;
    return button;
  }

  doAction(button: IActionBarButton) {
    button.func();
  }

Upvotes: 2

Views: 3296

Answers (1)

user4676340
user4676340

Reputation:

Your error comes from here : 

this.router.routerState.root.firstChild.routeConfig.data

You have indeed imported the router testing module, but don't expect it to be set up to your particular needs.

To avoid that, you can add a custom configuration in your beforeEach function : 

RouterTestingModule.withRoutes([] as Route[], {} as ExtraOptions);

Simply replace the parameters with values that are suiting your test case.

Upvotes: 2

Related Questions