How To Test Router.navigate In Angular

Published on August 12, 2024

Last time we talked about how we can mock methods in services in Angular with jest, but now let's talk about the router a bit.

When it comes to Angular routing, we mostly inject the Router into our application, and use the router.navigate method to navigate programmatically between our pages.

Sometimes it can be fun when we do that, especially when you are doing a whole lot of logic before navigating your user.

But the problem arises when we need to write test for the Router.navigate function, I found a way that works quite well, check it out below.

For clarity, we are trying to test a code that looks like the below:

home.component.ts

@Component({
	selector: 'app-home',
	standalone: true,
	imports: [],
	templateUrl: './home.component.html',
	styleUrl: './home.component.scss',
})
export class HomeComponent implements OnInit {
	private _router = inject(Router);

	ngOnInit(): void {
      this._router.navigate(['/']);
	}
}

Now let's write the test:

home.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { provideRouter, Router } from '@angular/router';
import { homeRoutes } from '../../home.routes';

describe('HomeComponent', () => {
	let component: HomeComponent;
	let fixture: ComponentFixture<HomeComponent>;
	let router: Router;

	beforeEach(async () => {

		await TestBed.configureTestingModule({
			imports: [HomeComponent, HttpClientTestingModule],
			providers: [
				provideRouter(homeRoutes),
			],
		}).compileComponents();

		fixture = TestBed.createComponent(HomeComponent);
		component = fixture.componentInstance;
        // Inject the Router into the TestBed
		router = TestBed.inject(Router);
		fixture.detectChanges();
	});

	it('should take the user to the home route when not logged in', () => {
		// Run the test within Angular's NgZone to handle asynchronous operations, including router.navigate
		fixture.ngZone?.run(() => {
			// Spy on the navigate method of the Router
			const routerSpy = jest.spyOn(router, 'navigate');

			// Call ngOnInit to trigger the component's initialization logic
			component.ngOnInit();

			// Check if the navigate method was called with the home route
			expect(routerSpy).toHaveBeenCalledWith(['/']);
		});
	});
});

That is it, we are done, just like that.

Hey 👋, I believe you enjoyed this shortie (it serves as a note to my future self 😎) and learned something new and valuable. Learn about how to mock methods in services with jest here.

You can also follow me on Twitter (or instead X 😂) as I share more tips and tricks to make you improve as a better software engineer.

Until then, happy coding!

How To Test Router.navigate In Angular

Table of Content