Angular 2/4/6/7 - Unit Testing with Router
Solution 1
You can also just use the RouterTestingModule and just spyOn the navigate function like this...
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { MyModule } from './my-module';
import { MyComponent } from './my-component';
describe('something', () => {
let fixture: ComponentFixture<LandingComponent>;
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
MyModule,
RouterTestingModule.withRoutes([]),
],
}).compileComponents();
fixture = TestBed.createComponent(MyComponent);
router = TestBed.get(Router); // TestBed.inject(Router) for Angular 9+
});
it('should navigate', () => {
const component = fixture.componentInstance;
const navigateSpy = spyOn(router, 'navigate');
component.goSomewhere();
expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']);
});
});
Solution 2
It's because the Route
has some dependencies it expects passed to its constructor.
If you're using Angular components, you shouldn't be trying to do isolated tests. You should use the Angular testing infrastructure to prepare the test environment. This means letting Angular create the component, letting it inject all the required dependencies, instead of you trying to create everything.
To get you started, you should have something like
import { TestBed } from '@angular/core/testing';
describe('Component: NavTool', () => {
let mockRouter = {
navigate: jasmine.createSpy('navigate')
};
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ NavToolComponent ],
providers: [
{ provide: Router, useValue: mockRouter },
ComponentComm
]
});
});
it('should click link', () => {
let fixture = TestBed.createComponent(NavToolComponent);
fixture.detectChanges();
let component: NavToolComponent = fixture.componentInstance;
component.clickLink('home');
expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);
});
});
Or something like that. You use the TestBed
to configure a module from scratch for the testing. You configure it pretty much the same way with an @NgModule
.
Here we are just mocking the router. Since we are just unit testing, we may not want the real routing facility. We just want to make sure that it is called with the right arguments. The mock and spy will be able to capture that call for us.
If you do want to use the real router, then you need to use the RouterTestingModule
, where you can configure routes. See an example here and here
See Also:
- Angular docs on Testing for more examples using the Angular testing infrastructure.
Solution 3
Here an axample if we inject Route service in our component controller:
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'; // Because we inject service in our component
import { Router } from '@angular/router'; // Just if we need to test Route Service functionality
import { AppComponent } from './app.component';
import { DummyLoginLayoutComponent } from '../../../testing/mock.components.spec'; // Because we inject service in your component
describe('AppComponent', () => {
let router: Router; // Just if we need to test Route Service functionality
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
DummyLoginLayoutComponent // Because we inject service in our component
],
imports: [
RouterTestingModule.withRoutes([
{ path: 'login', component: DummyLoginLayoutComponent },
]) // Because we inject service in our component
],
}).compileComponents();
router = TestBed.get(Router); // Just if we need to test Route Service functionality
router.initialNavigation(); // Just if we need to test Route Service functionality
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
We can also test other functionalitites such as navigate()
. Just in case:
it('should call eventPage once with /register path if event is instanceof NavigationStart', fakeAsync(() => {
spyOn(analyticService, 'eventPage');
router.navigate(['register'])
.then(() => {
const baseUrl = window.location.origin;
const url = `${baseUrl}/register`;
expect(analyticService.eventPage).toHaveBeenCalledTimes(1);
expect(analyticService.eventPage).toHaveBeenCalledWith(url);
});
}));
My file with all mock components (mock.components.specs.ts)
import { Component } from '@angular/core';
@Component({
selector: 'home',
template: '<div>Dummy home component</div>',
styleUrls: []
})
export class DummyHomeComponent { }
Solution 4
Jasmine goes one better with full spy objects...
describe('Test using router', () => {
const router = jasmine.createSpyObj('Router', ['navigate']);
...
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [ { provide: Router, useValue: router } ],
...
});
});
Ka Tech
Updated on February 15, 2022Comments
-
Ka Tech over 2 years
In Angular 2.0.0, I am unit testing a component that uses Router. However I get the 'Supplied parameters do not match any signature of call target.' error. In Visual studio code in spec.ts it is the new Router() that is highlighted in red
I really appreciate if someone could let me know what the correct syntax would be? Thanks in advance. My code as follows:
spec.ts
import { TestBed, async } from '@angular/core/testing'; import { NavToolComponent } from './nav-tool.component'; import { ComponentComm } from '../../shared/component-comm.service'; import { Router } from '@angular/router'; describe('Component: NavTool', () => { it('should create an instance', () => { let component = new NavToolComponent( new ComponentComm(), new Router()); expect(component).toBeTruthy(); }); });
Component constructor
constructor(private componentComm: ComponentComm, private router: Router) {}
-
Ryan Burbidge almost 7 yearsThanks, this works! I also use
router = TestBed.get(Router)
and save my router to a variable alongside fixture, instead of casting component to any, as recommended in angular.io/guide/testing#testbedget -
Juni Brosas over 6 yearsThanks, this solved my issue: cannot read property 'root' of undefined when mocking router.
-
harsh about 6 yearsHi @ Lenny Can you please explain what is component.goSomewhere(); doing here?
-
Lenny almost 6 years@harsh to pass this test the component would have to have a method called
goSomewhere()
that contains the codethis.router.navigate([/expectedUrl'])
(which would navigate to/expectedUrl
. -
adrisons over 4 yearsWith this code I see the warn:
console.warn ../../../node_modules/@angular/core/bundles/core.umd.js:27337 Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
-
fegyi001 over 2 yearsThis works like a charm. TestBed.get which was in another solution is deprecated by now.
-
Michel over 2 yearsI use this code, and it works. But... I also get an error in the NgTest console: "Can't bind to 'routerLink' since it isn't a known property of 'a'.". I tried importing RouterModule and RoutingModule, but that didn't work. Is it because I use a MockRouter, that Angular can't find the routerlink attribute is available on the a element?
-
Aqdas about 2 yearshow to create fake model and pass route?
-
oomer about 2 years
If you do want to use the real router, then you need to use the RouterTestingModule
andletting Angular create the component, letting it inject all the required dependencies, instead of you trying to create everything
were nice pieces of advice that helped me fix my test which needed to use actual angular router rather than a mocked one inside the service i was testing. -
oomer about 2 yearsI had to just pass the service class ref i-e
HiddenNavGuard
in the providers array in TestBed rather than passing an object of the servicenew HiddenNavGuard(router, appServiceStub);
created by myself, and viola, the HiddenNavGuard then had access to the router created by the testing module.