How do I Mock an Angular 2 route? How do I Mock an Angular 2 route? angular angular

How do I Mock an Angular 2 route?


For a simple case you could just create your own mock and provide it by value, for example:

describe('whatever', () => {  let mockRouter: any;  ...  beforeEach(async(() => {    // create your own mock     mockRouter = jasmine.createSpyObj('Router', ['navigate']);    ...    TestBed.configureTestingModule({      declarations: [LoginComponent],      providers: [        // provide it by value        { provide: Router, useValue: mockRouter },        ...      ],    }).compileComponents();  }));  ...}); 

This uses the test bed's dependency injection, rather than trying to "new-up" the class under test.

For an example in context, see e.g. one of my projects on GitHub.


Here is a working example of loading query string parameters for each test. Works on Angular 2.3.

  beforeEach(async(() => {    TestBed.configureTestingModule({      declarations: [        MyViewerComponent,        ...      ],      imports: [        HttpModule,        FormsModule,        RouterModule,        ...        ],      providers: [        {provide: ActivatedRoute, useValue: {queryParams: {test: 111}}},        {provide: MyService, useClass: MyMockService}      ]    })      .compileComponents();  }));


I accepted the above answer because it appears to be correct, however, I actually implemented it differently...

describe("Login Component", () => {    let component: LoginComponent;    let authService: AuthenticationService;    let router: Router;    describe("Testing the subscription happens", () => {        beforeEach(() => {            TestBed.configureTestingModule({imports: [RouterTestingModule]});            router = TestBed.get(Router);            authService = new AuthenticationService();            authService.notifications = new Subject();            authService.notifications.subscribe = jasmine.createSpy("SpyToTestNotifications");        });        it("Make sure we try to subscribe to the auth event", () => {            component = new LoginComponent(authService, router);            expect(authService.notifications.subscribe).toHaveBeenCalled();        })    });});

As you can see this only requires 2 lines in the beforeEach...

TestBed.configureTestingModule({imports: [RouterTestingModule]});router = TestBed.get(Router);

However, per @jonrsharpe this does a lot of things so you can't guarantee what other side effects might happen. But it is quick, it is dirty and it does seem to "work"