Using Jasmine framework to test Angular Router

Burak Tasci
Feb 16, 2017 · 2 min read

Have an Angular application that uses the @angular/router to provide navigation across pages?

The following test sample could be scaled to your application to ensure routing is done correctly, from one component to another.

First of all, let’s import the dependencies we will need in this test:

import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { Component, NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

Then, let’s create a TestBootstrapComponent which contains the router-outlet — used to bootstrap the test app; and a TestComponent.

You won’t need to create different components for each route. A dummy test component is more than enough.

@Component({ template: '<router-outlet></router-outlet>' })
class TestBootstrapComponent {}
@Component({ template: '' })
class TestComponent {}

Now, you will need to import these components to the app.

Keeping in mind that components can only be imported by one module, you should create a shared module and import components there — which could be imported by any feature modules in case of need:

declarations: [TestComponent,TestBootstrapComponent],
imports: [RouterTestingModule]
class TestSharedModule { }

And then, you’ll need to provide routes:

const testRoutes: Routes = [
path: '',
children: [
path: '',
component: TestComponent
path: 'about',
component: TestComponent
path: 'change-language/:languageCode',
component: TestComponent
path: '**',
redirectTo: '',
pathMatch: 'full'

Finally, it’s time to prepare the module configuration for testing purposes:

// test module configuration for each test
const testModuleConfig = () => {
// reset the test environment before initializing it.
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting())
imports: [

After all, testing the route navigation across pages is as easy as below:

describe('Some service',
() => {
beforeEach(() => {
it('should be able to navigate to `/`',
fakeAsync(() => {
const injector = getTestBed();
const router = injector.get(Router);
const fixture = TestBed.createComponent(TestBootstrapComponent);
// initial navigation
.then(() => {

Burak Tasci (fulls1z3)

Burak Tasci

In depth articles about software technologies

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store