angular 7 testing error- rxjs asyncObject Error: Timeout - Async callback was not invoked within 5000ms

Question

I got the following error:

   Error: Timeout - Async callback was not invoked within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
            at <Jasmine>

If I don't reinitialize the resourceSubject$ in before each both test together won't work(I mean by test will not cover all subscription code), when I try to make a new AsyncSubject beforeEach, I got the above error

my service subscribe to an event that I need to test

this is my test code:

let resourceSubject$: AsyncSubject<Setting>;
beforeEach(async () => {
  resourceLoaderMock.funToMock.and.returnValue({
      observableObj: resourceSubject$.asObservable() ,
      loadData(){}
    });
  ......
.....
beforeEach(() => {
  subject$ = new AsyncSubject<any>();
  resourceSubject$ = new AsyncSubject<Data>(); // this make the issue , if i removed it i could not run both test cases
});


fit('should get data from server', async () => {
  // given

  // when
  service.loadData();
  resourceSubject$.next(deafultValues)
  resourceSubject$.complete(); 

  // then
  const res: Setting = await new Promise((resolve, reject) => {
    service.subscribe$.subscribe(value => {
      resolve(value);
    });
  });

  expect(deafultValues).toEqual(res);
});

my service func I need to test:

this.resource.observableObj.subscribe(
  result => {
    // Handle result
    this.subscriber$.next(result);
    this.subscriber$.complete();
  },
  error => {
    this.subscriber$.next(defaultData);
    this.subscriber$.complete();
  }
);

another example with the same error - when I want to test a sample class has subscribed, the class is not injectable

describe('spec', () => {
  let httpClientMock: jasmine.SpyObj<HttpClient>;
  let loggerMock: jasmine.SpyObj<Logger>;
  let resourceClass: ResourceLoader<Setting>;
  let subject$: AsyncSubject<any>;

 beforeEach(async () => {
    httpClientMock = jasmine.createSpyObj('httpClient', ['get']);
    loggerMock = jasmine.createSpyObj('Logger', [
      'debug',
      'error',
      'trace',
      'info',
      'build'
    ]);
    loggerMock.build.and.returnValue(loggerMock);
  });
  beforeEach(() => {
    subject$ = new AsyncSubject<any>();
    classTest = new ClassTets(Class, 'api-url.com', loggerMock, httpClientMock);
  });

 it('should test', async () => {
    // given
    httpClientMock.get.and.returnValue(subject$);
    // when
    classTest.loadData()
    subject$.next({});
    subject$.complete();

    // then
    const result = await new Promise((resolve, reject) => {

    });

  });
});

Apokralipsa Apokralipsa · Accepted Answer · 2019-06-12T05:20:42

You create a new subject in the nested beforeEach, so the value passed as next never reaches the mock. It holds a reference to the old subject wrapped as an observable. I'm guesing you would need to recreate the mock after you create the new subject.

angular 7 testing error- rxjs asyncObject Error: Timeout - Async callback was not invoked within 5000ms

1 Answers