44

I have referred the following link to get the answers, but I couldn't find any working solution for my scenario. Error: (SystemJS) Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

Therefore, I have been trying to remove the Activated Route from the providers and still the test bed is not passing. It shows

Error: No provider for ActivatedRoute!

So here is my code, I want to run my test bed in the angular application which is using Jasmine.

import { ActivatedRoute } from '@angular/router';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterModule, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [ RouterModule, RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [ ActivatedRoute ],
    })
    .compileComponents();
  }));

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

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

Error getting

enter image description here

Lakindu Gunasekara
  • 4,221
  • 4
  • 27
  • 41
  • 6
    `ActivatedRoute` is one of the providers already defined by the `RouterModule`, you shouldn't include it again. Also note that there is a `RouterTestingModule` that may be more appropriate for your needs. – jonrsharpe Jan 03 '18 at 12:48

5 Answers5

69

You want to inject a fake ActivatedRoute to your component, since you create it yourself in the test, and the router thus doesn't create it for you and inject an ActivatedRoute. So you can use something like this:

describe('SomeComponent', () => {

  const fakeActivatedRoute = {
    snapshot: { data: { ... } }
  } as ActivatedRoute;

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [ RouterTestingModule ],
      declarations: [ SomeComponent ],
      providers: [ {provide: ActivatedRoute, useValue: fakeActivatedRoute} ],
    })
    .compileComponents();
  }));
});
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • 4
    Thing is, how do you populate the snapshot object so it works? – Zerok Aug 28 '18 at 11:40
  • 4
    Why do I HAVE to fake it? Is there any example on the internet where I actually simulate reading URLs? – Lauri Elias Oct 11 '18 at 16:48
  • 2
    This answer brought me the solution: Still in Angular 14: I added to the imports RouterTestingModule (there was no need to add {provide: ActivatedRoute, useValue: fakeActivatedRoute}) – Mike Aug 14 '22 at 17:05
16

Here's a solution for angular 7

{
    provide: ActivatedRoute,
    useValue: {
        snapshot: {
            paramMap: {
                get(): string {
                    return '123';
                },
            },
        },
    },
},
Pete
  • 300
  • 3
  • 6
5
{
  provide: ActivatedRoute,
  useValue: {
    snapshot: {
      queryParamMap: {
        get(): number {
          return 6;
        }
      }
    }
  }
}
MartenCatcher
  • 2,713
  • 8
  • 26
  • 39
Sourav Golui
  • 583
  • 1
  • 6
  • 13
1

Remove ActivatedRoute, this don't require testing

Neftalí Yagua
  • 360
  • 3
  • 10
1

I resolved this just by Adding RouterTestingModule to imports instead of adding ActivatedRoute to Providers

Aydin
  • 77
  • 1
  • 1
  • 11