How to mock service function in Angular component for unit test

Question

I am writing unit test for angular app, I am testing if the service function returns a value.

component.spec.ts

import {TopToolBarService} from '../../top-toolbar/top-toolbar.service';

beforeEach(async(() => {
   TestBed.configureTestingModule ({
   declarations: [ UsersListComponent],
   providers: [TopToolBarService],//tried mocking service here,still test failed
   schemas:[CUSTOM_ELEMENTS_SCHEMA]
 })
  .compileComponents();
}));



beforeEach(() => {
    fixture = TestBed.createComponent(UserListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });



  it('should return data from service function', async(() => {
    let mockTopToolBarService: jasmine.SpyObj<TopToolBarService>;
    mockTopToolBarService = jasmine.createSpyObj('TopToolBarService', ['getCustomer']);
    mockTopToolBarService.getCustomer.and.returnValue("king");
    fixture.detectChanges();
    expect(component.bDefine).toBe(true); //fails
  }))

component.ts

bDefine = false;
ngOnInit() {
 let customer = this.topToolBarService.getCustomer();
 if (customer == null) {
   bDefine = false;
 } else {
    bDefine = true;
   }
}

I believe I have mocked the service function in my test, so I expect it must have reached else part where variable is set to 'true'.

TopToolBarService.ts

import { EventEmitter, Injectable, Output } from "@angular/core";

@Injectable()
export class TopToolBarService {
customer = null;

  getCustomer() {
    return this.customer;
  }
}

Could you create a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), preferably on StackBlitz or similar? What is the rest of `component.spec.ts` and `component.ts`? — Chris Yungmann, Oct 10 '19 at 21:31

score 41 · Answer 1 · edited May 05 '23 at 20:39

Try updating providers inside beforeEach(async(() => ...) and moving your mockedService variable on the top of it:

describe('Component TEST', () => {
   ...
   let mockToolBarService;
   ...
      beforeEach(async(() => {
      ...
      mockToolBarService = jasmine.createSpyObj(['getCustomer']);
      mockToolBarService.getCustomer.and.returnValue('king');
      TestBed.configureTestingModule ({
           ...
           providers: [ { provide: TopToolBarService, useValue: mockToolBarService } ]
           ...

Hope it helps!

score 18 · Answer 2 · answered Jan 24 '20 at 07:24

18

Change your provider value

beforeEach(() => {
   TestBed.configureTestingModule({
      declarations: [ UsersListComponent],
      providers: [{
         provide: TopToolBarService,
         useValue: jasmine.createSpyObj('TopToolBarService', ['getCustomer'])
      }],
      schemas:[CUSTOM_ELEMENTS_SCHEMA]
     });
     mockTopToolBarService = TestBed.get(TopToolBarService);

     mockTopToolBarService.getCustomer.and.returnValue(of([])); // mock output of function
   })

answered Jan 24 '20 at 07:24

Islam Murtazaev

1,488
2
17
27

I have a question, why you used providers? – Rebai Ahmed Feb 06 '23 at 13:16
@RebaiAhmed sorry, can't tell now, it was more than 3 years ago. I haven't worked on frontend for while now. – Islam Murtazaev Feb 07 '23 at 10:43

score 3 · Answer 3 · answered Dec 21 '20 at 07:34

3

You might consider usage of ng-mocks to avoid all that boilerplate to configure TestBed.

beforeEach(() => MockBuilder(UsersListComponent)
  .mock(TopToolBarService, {
    // adding custom behavior to the service
    getCustomer: jasmine.createSpy().and.returnValue('king'),
  })
);

it('should return data from service function', () => {
  const fixture = MockRender(UsersListComponent);
  // now right after the render the property should be true
  expect(fixtur.point.componentInstance.bDefine).toBe(true);
}));

answered Dec 21 '20 at 07:34

satanTime

12,631
1
25
73

How to mock the custom pipe using ng-mock , any example ? – sunil Apr 09 '21 at 07:46
There is `MockPipe` function: https://ng-mocks.sudo.eu/api/MockPipe – satanTime Apr 09 '21 at 07:47
Why we combined ng-mocks and jasmine.createSpy()? – Rebai Ahmed Feb 06 '23 at 13:17
`ng-mocks` allows you to customize only what you want, for example `getCustomer` only. So you don't need to mock other dependencies if they exist. – satanTime Feb 07 '23 at 10:54
What's the advantage of including ng-mocks here? – Rebai Ahmed Feb 13 '23 at 09:49

score 1 · Answer 4 · answered Oct 10 '19 at 21:33

1

You have to configure the testing module before you run your code. It doesn't know about your spy object unless you pass it to the TestBed.configureTestingModule as an import.

https://angular.io/guide/testing#component-with-a-dependency

answered Oct 10 '19 at 21:33

observingstream

466
3
8

link broken, update to https://angular.io/guide/testing-components-scenarios#component-with-a-dependency – runderworld Oct 21 '22 at 18:34

How to mock service function in Angular component for unit test

4 Answers4

Linked