Error: : fromEvent is not declared writable or has no setter

Question

The old code uses rxjs v5.5.12, We copied the same code to our new project which uses rxjs v6.4.0. We are getting this error when we tried to run the test case.

Old Code:

import * as ObservableEvents from 'rxjs/Observable/fromEvent';
spyOn(ObservableEvents, 'fromEvent').and.returnValue(new Subject<any>().asObservable());

New Code:

import * as rxjs from 'rxjs';
spyOn(rxjs, 'fromEvent').and.returnValue(new Subject<any>().asObservable());

In both cases we are getting this error:

Error: : fromEvent is not declared writable or has no setter

We couldn't find a valid resource to solve this issue.

Update #1

We tried using

import * as rxjs from 'rxjs';
spyOn(jasmine.createSpyObj(rxjs), 'fromEvent').and.returnValue(new Subject<any>().asObservable());

but this time, we got

createSpyObj requires a non-empty array or object of method names to create spies for thrown

Update #2:

We used the code from @Omair-Nabiel, now getting a new error

      TypeError: Object(...) is not a function
          at XxxPopoverDirective.fromEvent [as createPopover] (http://xxx:xxxx/src/app/shared/xxx/xxx.directive.ts?:113:37)
          at XxxPopoverDirective.createPopover [as mouseClick] (http://xxx:xxxx/src/app/shared/xxx/xxx.directive.ts?:70:14)
          at runTest (http://xxx:xxxx/src/app/shared/xxx/xxx.directive.spec.ts?:181:19)

xxx.directive.ts

line 113-> this.componentRef && this.componentRef.destroy();
this.componentRef = null;

line 70-> constructor(
...
private resolver: ComponentFactoryResolver,
...
  ) { }

Update #3

Hi Omair Nabiel, Please find the below code we are using, please let me know the solution,

file="popover.directive.ts" Code:

import { fromEvent } from 'rxjs/Observable/fromEvent';

this.clickOutSub = fromEvent(this.documentRef.getDocument(), 'click').subscribe(this.clickOut.bind(this));

file="popover.directive.spec.ts"
Code:
import * as ObservableEvents from 'rxjs/Observable/fromEvent';

function runTest() {

spyOn(ObservableEvents, 'fromEvent').and.returnValue(new Subject<any>().asObservable());

 }

it('...', () => {
expect(ObservableEvents.fromEvent).toHaveBeenCalled();
});

Answer 1

You need to spy on a property of rxjs. Using spyOnProperty will solve the error. Try this

 import * as rxjs from 'rxjs'
 import { of, fromEvent } from 'rxjs';  

spyOnProperty(rxjs, 'fromEvent').and.returnValue(of({}))

you can also add to getter/setters using this like

spyOnProperty(rxjs, 'fromEvent', 'get').and.returnValue(false)

Hope this helps

Answer 2

The problem is that a module namespace object like import * as rxjs has a specific behavior and doesn't allow to mutate itself in many cases. Here's a few relevant links:

• Cannot spy on individual functions that are individually exported
• Mocking fromEvent in rxjs6
• Spy on jasmine function from an Angular library is not working
• import * as (jasmine spyOn) not writable
• Can webpack 4 modules be configured as to allow Jasmine to spy on their members?

As you can see it's a well known issue but at the moment there's no ultimate solution that works in all cases. The most common workaround is to use spyOnProperty like Alejandro Barone's answer suggests, I've tried this solution in Angular 8 / TypeScript 3.4 setup and it works well, but in doesn't work in Angular 10 / TypeScript 4 and gives the following error:

fromEvent is not declared configurable

But let's look at the problem from a different angle. As an example you can imagine a class that subscribes to window's resize event and increments some counter when the event is triggered. The class can use fromEvent to subscribe to the event or can subscribe directly via window.addEventListener. In both cases the class will behave the same - the counter will be incremented when the event happens. By spying on fromEvent you make an assumption that the class uses that function, however the only contract the class gives you is its interface. In the future someone might decide to use window.addEventListener instead of fromEvent and the tests will be broken despite the class works the same way. So the right way to test such a class is to trigger window's resize event and check that the counter is incremented. It's a good practice to test classes like black boxes without any assumptions about its implementation.

If it's still important to you to spy on fromEvent function, you can create a wrapper on it and mock it in your tests, for example:

import { fromEvent, Observable, of } from 'rxjs';
import { FromEventTarget } from 'rxjs/internal/observable/fromEvent';

class EventObserver {
  observe<T>(target: FromEventTarget<T>, eventName: string): Observable<T> {
    return fromEvent(target, eventName);
  }
}

class MyClass {
  constructor(
    private eventObserver = new EventObserver()
  ) {}

  doSomething() {
    this.eventObserver.observe(window, 'resize').subscribe(() => {
      // do something
    });
  }
}

it("#doSomething should subscribe to window's resize event", () => {
  const eventObserver = jasmine.createSpyObj<EventObserver>(EventObserver.name, ['observe']);
  eventObserver.observe.and.returnValue(of({}));

  const myClass = new MyClass(eventObserver);
  myClass.doSomething();

  expect(eventObserver.observe).toHaveBeenCalledTimes(1);
  expect(eventObserver.observe).toHaveBeenCalledWith(window, 'resize');
});

Answer 3

Complementing Omair's answer. On my case, I need to have a function on the returnValue statement.

const fromEventSpy = spyOnProperty(rxjs, 'fromEvent').and.returnValue(() => rxjs.of({}));

Cheers!

Answer 4

Angular +10 solution that allows to spyOn modules "import * as XXX from 'abc'"

Add to tsconfig.spec.json

"compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        ...
    },

Both props module and target are important! This won't work unless target is set to es5 and module is not commonjs;

Now in your spec file you can do something like this:

    import * as selectors from '@app/state';
    
    const mockModuleFunc = (importModule: any, methodName: string, returnValue: any = null) => {
       let currentVal = importModule[methodName];
       const descriptor = Object.getOwnPropertyDescriptor(importModule, methodName);
       if(!descriptor.set) {
          Object.defineProperty(importModule, methodName, {
             set(newVal) {
                    currentVal = newVal;
                },
                get() {
                    return currentVal;
                },
                enumerable: true,
                configurable: true
          });
       }
    
       /** 
        * This actually works now and doesn't throw "is not declared writable or has no setter" error.
        * Use spyOn as always, example with parameterized ngrx selectors:
        */
       return spyOn(importModule, methodName).and.returnValue(() => returnValue);
    }

// Usage example
it('Your test description', () => {
       const spy = mockModuleFunc(selectors, 'yourFunctionToSpyOn', 'xyz');
    
       ...
    })

Answer 5

The consensus seems to be that it is not possible or desirable to spy directly on a function taken from a module; even if you manage to find a way to make it work, the solution will be brittle, and a system update may break the workaround.

Some combination of a wrapper class and DI is necessary, but how can that be done cleanly? It is not ideal to introduce a wrapper class just in order to make the system testable, but it can be done without too much extra boilerplate.

My example is taken from the (newly released at the time of writing) Firebase 9 SDK. The untested code would look like this:

import { Firestore, query, collection, where, collectionData } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class AccountService {
  constructor(private firestore: Firestore) { }

  public getAccountFromUid(uid: string): Observable<Account[]> {
    const accountsQuery = query(
      collection(this.firestore, 'accounts'), 
      where('firebaseUid', '==', uid)
    );
    return collectionData(accountsQuery);
  }}
}

Unfortunately, this is untestable, because query, collection, where and collectionData are functions imported directly from a module, and the following code does not work, even when using variants involving spyOnProperty:

import * as firestore from '@angular/fire/firestore`

spyOn(firestore, 'collectionData').and.returnValue(of(...));

To work around this, I introduce a service called FirestoreService. It is a fairly straightforward entity:

import { Injectable } from '@angular/core';
import * as firestore from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class FirestoreService {

  constructor() { }

  public get collectionData() { return firestore.collectionData; }
  public get query() { return firestore.query; }
  public get collection() { return firestore.collection; }
  public get where() { return firestore.where; }
}

Then I can inject this into my original class and modify it as follows:

import { Firestore } from '@angular/fire/firestore';
import { FirstoreService } from './services/firestore.service';

@Injectable({
  providedIn: 'root'
})
export class AccountService {
  constructor(
    private firestore: Firestore,
    private firestoreService: FirestoreService,
  ) { }

  public getAccountFromUid(uid: string): Observable<Account[]> {
    const { query, collection, where, collectionData } = this.firestoreServioce; 
    const accountsQuery = query(
      collection(this.firestore, 'accounts'), 
      where('firebaseUid', '==', uid)
    );
    return collectionData(accountsQuery);
  }}
}

And then the properties of firestoreService behave like functions that can be spied on as normal:

import { of } from 'rxjs';
import * as firestore from '@angular/fire/firestore';
import { FirestoreService } from './services/firestore.service';

describe('AccountService', () => {
  let service: AccountService;
  let firestoreSpy: jasmine.SpyObj<firestore.Firestore>;
  let firestoreServiceSpy: jasmine.SpyObj<FirestoreService>

  beforeEach(() => {
    firestoreSpy = jasmine.createSpyObj('firestore.Firestore', ['app']);
    firestoreServiceSpy = jasmine.createSpyObj('FirestoreService',
      ['query', 'collectionData', 'collection', 'where']);
    firestoreServiceSpy.collectionData.and.returnValue(of(...));
  });
});