Spying on Mock Object Properties in Jasmine

Working around Jasmine's "already been spied upon" error when spying on a mocked object's property with Object.getOwnPropertyDescriptor.

Takahiro Iwasa

2021-09-26

3 min read

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 test. Calling spyOnProperty for currentUser raises the error because the property is already a spy.

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
});

Conclusion

Use Object.getOwnPropertyDescriptor instead of calling spyOnProperty again when a property spy was created by jasmine.createSpyObj.

Passing ['currentUser'] as the third argument to jasmine.createSpyObj creates the property spy before the test runs. A later spyOnProperty call therefore attempts to create a duplicate spy and fails.

Object.getOwnPropertyDescriptor(target, key)?.get returns the existing getter spy. Wrapping this lookup in spyGetter and spySetter helpers keeps the test code concise and reusable.

Back to posts