How to Spy on Mock Object Properties in Jasmine

Takahiro Iwasa

9/26/2021

2 min read

Angular JavaScript

When testing with Jasmine, you might encounter the following error while attempting to spy on a property of an already mocked object:

1
Error: <spyOnProperty> : currentUser#get has already been spied upon
2
Usage: spyOnProperty(<object>, <propName>, [accessType])

This error can be resolved with the Object.getOwnPropertyDescriptor method.

Common Scenario

Consider the following testing code. This code raises the error when currentUser is accessed.

1
import { HttpClientTestingModule } from '@angular/common/http/testing';
2
import { TestBed } from '@angular/core/testing';
3
import { AuthService } from '@core/services/auth.service';
4

5
describe('AuthService', () => {
6

7
  let service: jasmine.SpyObj<AuthService>;
8

9
  beforeEach(() => {
10
    TestBed.configureTestingModule({
11
      imports: [HttpClientTestingModule],
12
      providers: [
13
        { provide: AuthService, useValue: jasmine.createSpyObj('AuthService', [], ['currentUser']) },
14
      ],
15
    });
16

17
    service = TestBed.inject(AuthService) as jasmine.SpyObj<AuthService>;
18
  });
19

20
  it('should get the currentUser', () => {
21
    spyOnProperty(service, 'currentUser').and.returnValue({ id: 1, name: 'Hello World' });
22
    // Testing code here...
23
    expect(service.currentUser).toEqual({ id: 1, name: 'Hello World' });
24
  });
25

26
});

Solution

The official Jasmine tutorial suggests using Object.getOwnPropertyDescriptor to overcome this issue.

You can create a spy object with several properties on it quickly by passing an array or hash of properties as a third argument to createSpyObj. In this case you won’t have a reference to the created spies, so if you need to change their spy strategies later, you will have to use the Object.getOwnPropertyDescriptor approach.

To simplify the process of spying on getters and setters, you can define reusable helper functions like this:

1
/* eslint-disable-next-line arrow-body-style */
2
export const spyGetter = <T, K extends keyof T>(target: jasmine.SpyObj<T>, key: K): jasmine.Spy => {
3
  return Object.getOwnPropertyDescriptor(target, key)?.get as jasmine.Spy;
4
};
5

6
/* eslint-disable-next-line arrow-body-style */
7
export const spySetter = <T, K extends keyof T>(target: jasmine.SpyObj<T>, key: K): jasmine.Spy => {
8
  return Object.getOwnPropertyDescriptor(target, key)?.set as jasmine.Spy;
9
};

Updated Testing Code

With the helper function spyGetter, the testing code becomes more concise and readable:

1
import { HttpClientTestingModule } from '@angular/common/http/testing';
2
import { TestBed } from '@angular/core/testing';
3
import { AuthService } from '@core/services/auth.service';
4
import { spyGetter } from '@tests/helper';
5

6
describe('AuthService', () => {
7

8
  let service: jasmine.SpyObj<AuthService>;
9

10
  beforeEach(() => {
11
    TestBed.configureTestingModule({
12
      imports: [HttpClientTestingModule],
13
      providers: [
14
        { provide: AuthService, useValue: jasmine.createSpyObj('AuthService', [], ['currentUser']) },
15
      ],
16
    });
17

18
    service = TestBed.inject(AuthService) as jasmine.SpyObj<AuthService>;
19
  });
20

21
  it('should get the currentUser', () => {
22
    spyGetter(service, 'currentUser').and.returnValue({ id: 1, name: 'Hello World' });
23
    // Testing code here...
24
    expect(service.currentUser).toEqual({ id: 1, name: 'Hello World' });
25
  });
26

27
});