How do you mock services in Angular unit tests using Jasmine/Jest spies?

Q: How do you mock services in Angular unit tests using Jasmine/Jest spies?

**Target Audience:** Developers writing component and service tests who want to isolate a unit from its dependencies. **Difficulty:** Easy to Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Vitest spec in the example was run with Angular CLI 22.2.3 ( ng test --watch=false , Vitest 5, zoneless). The Jasmine spy behaviour was run in plain Jasmine 5.13 under Node, without Angular, to check the syntax and defaults; the Jest syntax is shown but was not run. ## 1. Why This Even Matters — A Story First A flight simulator does not need a real sky. It needs something that looks and responds exactly like the sky to the instruments in the cockpit. Pilots train on the simulator because the real thing is slow, expensive and occasionally dangerous. A component that shows a user profile does not need a real server either. It needs **something that answers like UserService ** when the component asks. That stand-in i

The problem

Question presented to candidate: "ProfileComponent injects a UserService that calls HttpClient and an analytics method. How would you unit test the component without real HTTP or analytics, using spies? Show it in the runner the project uses, and say how the Jasmine version would differ."

What a strong answer should cover:

Mocking works through dependency injection: replace the service token in TestBed.configureTestingModule({ providers }) with useValue (a spy object) or useClass (a fake class).
Vitest (the Angular 21+ CLI default): vi.fn(), mockReturnValue(of(...)), vi.spyOn(service, 'method'), toHaveBeenCalledWith; Jest's jest.fn()/jest.spyOn() have the same shape.
Jasmine: jasmine.createSpyObj('UserService', ['getUser']), .and.returnValue(...), spyOn(obj, 'm').and.callThrough().
Key difference: vi.spyOn calls the real method unless you mock it; Jasmine's spyOn stubs it unless you add and.callThrough().
Return Observables from mocked methods (of, throwError) so the component's subscribe logic is exercised, including the error path.
For HTTP specifically, provideHttpClientTesting() + HttpTestingController fakes the backend instead of the service.
Component-level providers are not replaced by TestBed providers; use TestBed.overrideComponent.

Clarifying questions expected:

"Which runner: Vitest, Jest, or Karma with Jasmine?"
"Is the service provided in root or in the component's own providers?"

Code / implementation expected: Yes — a component spec with a useValue spy mock, a spyOn on the real service, and an HttpTestingController variant.

testing
services

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers writing component and service tests who want to isolate a unit from its dependencies. Difficulty: Easy to Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The Vitest spec in the example was run with Angular CLI 22.2.3 (ng test --watch=false, Vitest 5, zoneless). The Jasmine spy behaviour was run in plain Jasmine 5.13 under Node, without Angular, to check the syntax and defaults; the Jest syntax is shown but was not run.

1. Why This Even Matters — A Story First

A flight simulator does not need a real sky. It needs something that looks and responds exactly like the sky to the instruments in the cockpit. Pilots train on the simulator because the real thing is slow, expensive and occasionally dangerous.

A component that shows a user profile does not need a real server either. It needs **something that answer

The solution is hidden so you can try first

9 min read · 9 sections

Read the code

AngularMocking a service three ways: useValue spies, vi.spyOn, HttpTestingController (Vitest, ran with ng test on Angular 22.2.3)

import { Component, Injectable, inject, signal } from '@angular/core';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { Observable, of, throwError } from 'rxjs';

type User = { id: number; name: string };

@Injectable({ providedIn: 'root' })
class UserService {
  private http = inject(HttpClient);
  getUser(id: number): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
  track(event: string) {
    console.log('analytics:', event); // a side effect we do not want in tests
  }
}

@Component({
  selector: 'app-profile',
  template: `<button (click)="load()">Load</button><p>{{ text() }}</p>`,
})
class Profile {
  private users = inject(UserService);
  text = signal('nothing yet');
  load() {
    this.users.track('load-clicked');
    this.users.getUser(7).subscribe({
      next: (u) => this.text.set(`Hello ${u.name}`),
      error: () => this.text.set('Could not load user'),
    });
  }
}

async function clickLoad() {
  const fixture = TestBed.createComponent(Profile);
  await fixture.whenStable();
  fixture.nativeElement.querySelector('button').click();
  await fixture.whenStable();
  return fixture.nativeElement.querySelector('p').textContent as string;
}

describe('mocking UserService', () => {
  it('1. replace it: a mock object of vi.fn() provided with useValue', async () => {
    const mock = {
      getUser: vi.fn().mockReturnValue(of({ id: 7, name: 'Ada' })),
      track: vi.fn(),
    };
    TestBed.configureTestingModule({ providers: [{ provide: UserService, useValue: mock }] });

    expect(await clickLoad()).toBe('Hello Ada');
    expect(mock.getUser).toHaveBeenCalledWith(7);
    expect(mock.track).toHaveBeenCalledOnce();
  });

  it('2. spy on the real one: vi.spyOn after TestBed.inject', async () => {
    const service = TestBed.inject(UserService);
    const getUser = vi.spyOn(service, 'getUser').mockReturnValue(throwError(() => new Error('500')));
    const track = vi.spyOn(service, 'track').mockImplementation(() => {}); // silence the side effect

    expect(await clickLoad()).toBe('Could not load user');
    expect(getUser).toHaveBeenCalledWith(7);
    expect(track).toHaveBeenCalledWith('load-clicked');
  });

  it('3. fake the HTTP layer instead: HttpTestingController', async () => {
    TestBed.configureTestingModule({ providers: [provideHttpClient(), provideHttpClientTesting()] });
    vi.spyOn(TestBed.inject(UserService), 'track').mockImplementation(() => {});
    const http = TestBed.inject(HttpTestingController);

    const fixture = TestBed.createComponent(Profile);
    await fixture.whenStable();
    fixture.nativeElement.querySelector('button').click();
    const req = http.expectOne('/api/users/7');
    expect(req.request.method).toBe('GET');
    req.flush({ id: 7, name: 'Grace' });
    await fixture.whenStable();

    expect(fixture.nativeElement.querySelector('p').textContent).toBe('Hello Grace');
    http.verify(); // fails if any request was not expected
  });
});

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.