How to mock a Router object and inject into providers array in TestBed configuration

Question

I'm trying to create and inject a mocked router object into TestBed configuration but it does not work. Below is the configuration :

let mockQuote: QuoteService = new QuoteService(null, null);
let mockOshcStore: OshcStore = new OshcStore(null);
let mockActivatedRoute: ActivatedRoute = new ActivatedRoute();
let mockRouter: Router = new Router(null, null, null, null, null, null, null, null);
//let mockRouter: RouterMock = new RouterMock();
//let router:Router;
TestBed.configureTestingModule({
  providers: [
    {
      provide: QuoteService, useFactory: () => {
        return mockQuote;
      }
    }, FormBuilder, AppStore,
    {
      provide: OshcStore, useFactory: () => {
        return mockOshcStore;
      }
    },
    {
      provide: ActivatedRoute, useFactory: () => {
        return mockActivatedRoute;
      }
    },
    {
      provide: Router, useFactory: () => {
        return mockRouter;
      }
    },
    HttpClient, QuoteCISLAdapter
  ],
  declarations: [CreateQuoteComponent]
});
fixture = TestBed.createComponent(CreateQuoteComponent);
component = fixture.componentInstance;

The above works until the 'ActivatedRoute' but stops when it hits the route and gives :

TypeError: Cannot read property 'get' of null

  at new Router (../packages/router/src/router.ts:406:30)

I also tried the imports array with 'RouterTestingModule' module as well but didn't work too. Any idea to craete a safe mocked Router object?

https://angular.io/api/router/testing/RouterTestingModule#usage-notes — maxime1992, Jan 14 '20 at 16:09
@maxime1992, I tried this but my component arguments said to be (?,?..then That's why I need to add this into providers — Juliyanage Silva, Jan 14 '20 at 16:24

Kyle Anderson · Accepted Answer · 2020-01-15T15:06:48.580

0

I usually have something like the above at the top of my beforeEach:

mockActivatedRoute = {
            url: 'test',
            params: of({ paramOne: 1,paramTwo: 2018 })
        };

and then the below in my providers array:

{ provide: ActivatedRoute, useValue: mockActivatedRoute },

For route... this assumes you're only using navigate in your component if you're using more you'll need to mock more things:

router = {
            navigate: jasmine.createSpy('navigate')
        };

and then in the providers array:

{ provide: Router, useValue: router },

edited Jan 15 '20 at 15:06

answered Jan 14 '20 at 16:30

Kyle Anderson

724
3
10

This is activated route, How can I give router like in the same manner? – Juliyanage Silva Jan 15 '20 at 08:57
@ShamithaSilva Added more details – Kyle Anderson Jan 15 '20 at 15:07
Thanks for getting back, I'll let you know if this works. Having some other troubles with JEST! – Juliyanage Silva Jan 15 '20 at 17:02

How to mock a Router object and inject into providers array in TestBed configuration

1 Answers1