CODEWITHSUNDEEP
angularunit-testingkarma-jasmineroutertestbed
Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4281

Angular 4 - Failed: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

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

Upvotes: 50

Views: 53019

Answers (7)

Jack Luo
Jack Luo

Reputation: 451

I'm using angular 19 and this works for me:

const fakeActivatedRoute = {
    snapshot: { data:{}, paramMap: { get: function(key){ return 'abc'; }} }
} as ActivatedRoute;

providers: [{provide: ActivatedRoute, useValue: fakeActivatedRoute}]

Upvotes: 0

velval
velval

Reputation: 3312

Using RouterTestingModule as shown on @Aydin answer works. However this is deprecated. So using applicationConfig({ providers: [provideRouter(routes)] }) under the decorators works perfectly as well. See below example:

const meta: Meta<MyComponent> = {
  title: 'My Component',
  component: MyComponent,
  decorators: [
    applicationConfig({
      providers: [provideRouter(routes)],
    }),
  ]
};

Upvotes: 0

Aydin
Aydin

Reputation: 187

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

Upvotes: 12

Neftal&#237; Yagua
Neftal&#237; Yagua

Reputation: 649

Remove ActivatedRoute, this don't require testing

Upvotes: 1

Pete
Pete

Reputation: 320

Here's a solution for angular 7

{
    provide: ActivatedRoute,
    useValue: {
        snapshot: {
            paramMap: {
                get(): string {
                    return '123';
                },
            },
        },
    },
},

Upvotes: 18

Sourav Golui
Sourav Golui

Reputation: 633

{
  provide: ActivatedRoute,
  useValue: {
    snapshot: {
      queryParamMap: {
        get(): number {
          return 6;
        }
      }
    }
  }
}

Upvotes: 6

JB Nizet
JB Nizet

Reputation: 692081

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();
  }));
});

Upvotes: 72

Related Questions