Angular karma testing: TypeError: Cannot read property 'path' of null

Question

I am trying run some tests on Angular Karma on an angular component to determine the route.

The component is structured like this

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-basic-form',
  templateUrl: './basic-form.component.html',
  styleUrls: ['./basic-form.component.less'],
})
export class BasicFormComponent implements OnInit { 
  constructor(
    public activatedRoute: ActivatedRoute,
  ) {}

  ngOnInit() {
    if(this.activatedRoute.snapshot.routeConfig.path === 'basic-form/:date'){ // route with date
     let date = this.route.snapshot.paramMap.get('date'); // get the date
   } else {
    // no worries, just use the latest date, and this component can be used on multiple routes  
   }
 }

In my test file I have

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BasicFormComponent } from './basic-form.component';


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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BasicFormComponent ],
      imports: [DemoMaterialModule, ReactiveFormsModule, FormsModule, HttpClientTestingModule,  RouterTestingModule.withRoutes([])],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      providers: [
      ]

    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component.activatedRoute.snapshot.routeConfig.path).toBeTruthy(); // why is this not working?
  });

});

The errors I am getting is

BasicFormComponent should create TypeError: Cannot read property 'path' of null TypeError: Cannot read property 'snapshot' of undefined

Why won't it import the activatedRoute module?

I am trying to get my head wrapped testing, which seems to be a dark art.

Any guidance will be appreciated.

The test is isolated from your application and doesn't know anything about the actual route. You need to mock your ActivatedRoute. — Gérôme Grignon

Sprep Sprep · Accepted Answer · 2020-02-18T18:49:03

Thanks to @Gérôme Grignon for pointing me to the right direction.

The answer in removing the errors is below, take note in the providers, there is the use value settings. No more errors.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BasicFormComponent } from './basic-form.component';


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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BasicFormComponent ],
      imports: [DemoMaterialModule, ReactiveFormsModule, FormsModule, HttpClientTestingModule,  RouterTestingModule.withRoutes([])],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      providers: [ BasicFormComponent, {
          provide: ActivatedRoute, 
          useValue: {snapshot: {params: {'date': ''}, routeConfig: {'path': 'basic-form-edit/:date'}}}
      }]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component.activatedRoute.snapshot.routeConfig.path).toBeTruthy(); // why is this not working?
  });
});

Angular karma testing: TypeError: Cannot read property 'path' of null

1 Answers