Skip to content

Mocking out Angular's ActivatedRoute for Unit Tests

Published: at 02:02 AM

I’ve been writing a ton of unit tests and snapshot tests lately. While doing so, I have had to mock out a few things. This includes the ActivatedRoute. So let’s say we have the following component.

  selector: "app-test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"],
export class TestComponent implements OnInit {
  importantData: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.importantData =["importantData"];

In order to mock the data out, you will need to use your mocked router object. So your test should look something like:

import { TestBed, async, ComponentFixture } from "@angular/core/testing";
import { TestComponent } from "./test.component";
import { ActivatedRoute } from "@angular/router";

describe("TestComponent", () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  const activatedRouteMock = {
    snapshot: {
      data: {
        importantData: {
          content: "Really Important String",

  beforeEach(async(() => {
      declarations: [TestComponent],
      providers: [{ provide: ActivatedRoute, useValue: activatedRouteMock }],
      .then(() => {
        fixture = TestBed.createComponent(TestComponent);
        component = fixture.componentInstance;

  it("should be defined", () => {

  it("should render the component", () => {

We can take this a step further and mock out queryParams as well. In our OnInit method we would have something like:

this.route.queryParams.subscribe(params => {
  this.moreImportantData.firstEntry = params["firstEntry"];
  this.moreImportantData.secondEntry = params["secondEntry"];

In order to set the params we would simply mock it out like so:

const activatedRouteMock = {
  queryParams: of({
    firstEntry: "This is the first entry",
    secondEntry: "This is the second entry",

Mocking out the ActivatedRoute is fairly straightforward. But just like every skill you learn, if you haven’t written any tests in a while or mocked it out, a quick reference like this is very helpful!