How to Test Service in Angular: Simple Guide with Example

To test a service in Angular, use TestBed to configure the testing module and inject the service. Write tests with Jasmine to check service methods by calling them and asserting expected results.

Syntax

Use TestBed.configureTestingModule to set up the testing environment. Inject the service with TestBed.inject(ServiceName). Write test cases inside describe and it blocks using Jasmine.

• TestBed.configureTestingModule({ providers: [YourService] }): Registers the service for testing.
• const service = TestBed.inject(YourService): Gets the service instance.
• describe: Groups related tests.
• it: Defines a single test case.
• expect: Makes assertions about results.

typescript

import { TestBed } from '@angular/core/testing';
import { YourService } from './your.service';

describe('YourService', () => {
  let service: YourService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [YourService]
    });
    service = TestBed.inject(YourService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should return expected value', () => {
    const result = service.yourMethod();
    expect(result).toBe('expected value');
  });
});

Example

This example shows how to test a simple Angular service that returns a greeting message. It demonstrates setting up the test module, injecting the service, and writing tests to check the service creation and method output.

typescript

import { TestBed } from '@angular/core/testing';

export class GreetingService {
  getGreeting(name: string): string {
    return `Hello, ${name}!`;
  }
}

describe('GreetingService', () => {
  let service: GreetingService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [GreetingService]
    });
    service = TestBed.inject(GreetingService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should return greeting message', () => {
    const greeting = service.getGreeting('Alice');
    expect(greeting).toBe('Hello, Alice!');
  });
});

Output

PASS  GreetingService should be created
PASS  GreetingService should return greeting message

Common Pitfalls

Common mistakes when testing Angular services include:

• Not configuring TestBed properly, so the service is undefined.
• Forgetting to inject the service before tests.
• Testing asynchronous methods without handling observables or promises correctly.
• Not cleaning up or resetting state between tests.

Always ensure the service is provided in the testing module and injected before use.

typescript

import { TestBed } from '@angular/core/testing';
import { GreetingService } from './greeting.service';

/* Wrong: Service not provided in TestBed */
describe('WrongServiceTest', () => {
  let service: GreetingService;

  beforeEach(() => {
    TestBed.configureTestingModule({}); // Missing providers
    service = TestBed.inject(GreetingService); // Will throw error
  });

  it('should fail', () => {
    expect(service).toBeTruthy();
  });
});

/* Right: Service provided correctly */
describe('RightServiceTest', () => {
  let service: GreetingService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [GreetingService]
    });
    service = TestBed.inject(GreetingService);
  });

  it('should pass', () => {
    expect(service).toBeTruthy();
  });
});

Quick Reference

• TestBed.configureTestingModule: Setup test environment.
• TestBed.inject: Get service instance.
• describe: Group tests.
• it: Define test case.
• expect: Assert results.

Key Takeaways

Always provide the service in TestBed.configureTestingModule before injecting it.

Use TestBed.inject to get the service instance for testing.

Write clear test cases with describe and it blocks using Jasmine.

Handle asynchronous service methods properly in tests.

Check service creation and method outputs with expect assertions.