Angular – Jasmine – Error: NG0204: Can’t resolve all parameters for ActivatedRoute

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.

How to reproduce it

component.ts

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

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: [ './message.component.css' ]
})
export class MessageComponent {

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit() {

    this.route.params.subscribe(snapshot => {
      console.log(snapshot);
    });
  }
}

component.spec.ts

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MessageComponent ],
    })
      .compileComponents();

Error

Error: NG0204: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?).

error properties: Object({ code: 204 })
    at getUndecoratedInjectableFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8112:15)
    at injectableDefOrInjectorDefFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8102:16)
    at providerToFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8148:52)
    at providerToRecord (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8132:25)
    at R3Injector.processProvider (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8035:24)
    at fn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:7871:59)
    at forEachSingleProvider (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8203:13)
    at forEachSingleProvider (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:8200:13)
    at new R3Injector (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:7871:9)
    at createInjectorWithoutInjectorInstances (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:9234:12)

Solution

Create an observable mockup.

component.spec.ts

  const mockActivatedRoute = {
    params: of({ id: '123' })
  };


  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MessageComponent ],
      providers:
        [
          {
            provide: ActivatedRoute,
            useValue: mockActivatedRoute
          }

        ]
    })
      .compileComponents();   

• Share on Facebook