Angular test error: Cannot read property 'subscribe' of undefined at new RouterLinkWithHref

Question

I don't get what I'm doing wrong, I didn't find any link of RouterLinkWithHref to any error in tests, furthermore I'm not using RouterLinkWithHref anywhere, as far as I know :/

Can anyone help me with this:

fdescribe('AddItemComponent: ', () => {
  let cmp: AddItemComponent;
  let fixture: ComponentFixture<AddItemComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  const mockRouter = {
    navigate: jasmine.createSpy('navigate')
  };
  const mockCustomCardService = {
    getItemDeliveryDate: () => Observable.empty(),
    emitItemChanges: () => Observable.empty(),
  };
  const mockActivatedRoute = { snapshot: {} };
  const mockPageDataService = {};
  const mockUserService = {};

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AddItemComponent],
      imports: [FormsModule, ReactiveFormsModule, SharedModule, TranslateModule.forRoot(), RouterTestingModule],
      providers: [
        SpinningService,
        FormBuilder,
        TranslateService,
        { provide: Router, useValue: mockRouter },
        { provide: CustomItemService, useValue: mockCustomItemService },
        { provide: PageDataService, useValue: mockPageDataService },
        { provide: UserService, useValue: mockUserService },
        { provide: ActivatedRoute, useValue: mockActivatedRoute }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    });

    fixture = TestBed.createComponent(AddItemComponent);
    cmp = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('Simple test', () => {
    expect(true).toBeTruthy();
  });

});

I ran into the same thing with a component where I was mocking `router` like you are doing here and where I had an `` tag with the routerLink attribute in the markup. Check out `RouterTestingModule`. This might be helpful too: https://stackoverflow.com/a/40187305/4530745 — nick, Sep 30 '17 at 00:38
Did you find a solution? I'm currently running into the same problem.. — Nicholas, Nov 13 '17 at 15:04

score 19 · Answer 1 · answered Feb 22 '18 at 15:48

You should remove your routing mocks (mockRouter, mockActivatedRoute) since you already import RouterTestingModule, something like this:

describe('AddItemComponent: ', () => {
  let cmp: AddItemComponent;
  let fixture: ComponentFixture<AddItemComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  const mockCustomCardService = {
    getItemDeliveryDate: () => Observable.empty(),
    emitItemChanges: () => Observable.empty(),
  };
  const mockPageDataService = {};
  const mockUserService = {};

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AddItemComponent],
      imports: [FormsModule, ReactiveFormsModule, SharedModule, TranslateModule.forRoot(), RouterTestingModule],
      providers: [
        SpinningService,
        FormBuilder,
        TranslateService,
        { provide: CustomItemService, useValue: mockCustomItemService },
        { provide: PageDataService, useValue: mockPageDataService },
        { provide: UserService, useValue: mockUserService }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    });

    fixture = TestBed.createComponent(AddItemComponent);
    cmp = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('Simple test', () => {
    expect(true).toBeTruthy();
  });

});

Thanks @sunsay!! Removing Router from providers worked for me!! — Shailesh Vikram Singh, Feb 26 '18 at 06:55

Angular test error: Cannot read property 'subscribe' of undefined at new RouterLinkWithHref

1 Answers1

Linked