Mocking out Angular's ActivatedRoute for Unit Tests

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.

@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 = this.route.snapshot.data['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(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent],
      providers: [{ provide: ActivatedRoute, useValue: activatedRouteMock }]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(TestComponent)
        component = fixture.componentInstance
      })
  }))

  it('should be defined', () => {
    expect(component).toBeDefined()
  })

  it('should render the component', () => {
    fixture.detectChanges()
    expect(fixture).toMatchSnapshot()
  })
})

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!

← Back to blog

Table of contents

Mocking out Angular's ActivatedRoute for Unit Tests