CODEWITHSUNDEEP
angulartestingjestjsrxjsobservable
Azarath
Azarath

Reputation: 91

Angular RxJS Jest Observables Completing on a Different Frame

I am trying to use Jest in my Angular application to test RxJS Observables and am running into an issue using the TestScheduler.

My generic sample Jest test below where the runMethodForService() method calls getArray() on myService which is mocked to return an observable of an array.

let testScheduler: TestScheduler;

beforeEach(() => {
  testScheduler = new TestScheduler((actual, expected) => {
    expect(actual).toEqual(expected);
  });
});

it('', () => {
  myServiceMock.getArray.mockReturnValueOnce(of([1,2,3]))
  component.runMethodForService();

  testScheduler.run(({expectObservable}) => {
    const expectedMarble = 'a|';
    const expectedArray = {a: mockArray};
    expectObservable(component.myObservable$).toBe(expectedMarble, expectedArray);
  });
});

My expected marble 'a|' just emits one value and then completes. And the expected value is some array. But I am getting the below as my expected and actual results

Expected Actual 
[
  {
    "frame": 0,
    "notification": {
      "kind": "N",
      "value": [ ... ]
    }
  },
  {
    "frame": 1, <--- Error here
    "notification": {
      "kind": "C"
    }
  }
]
 
[
  {
    "frame": 0,
    "notification": {
      "kind": "N",
      "value": [ ... ]
    }
  },
  {
    "frame": 0, <--- Error here
    "notification": {
      "kind": "C"
    }
  }
]

It looks like the actual result is that the observable completes on the same frame as the value but the expectation is that it completes one frame after.

I tried wrapping my marble in parentheses '(a|)' like is shown in the docs but then the test times out after 5 seconds and cannot complete. Not sure if there is something missing that is causing the completion to be expected on the same frame as the value is emitted.

Upvotes: 0

Views: 615

Answers (1)

Matthieu Riegler
Matthieu Riegler

Reputation: 55534

I strongly believe that what you are observing is that of([1,2,3]) is run synchronously thus terminating in the same frame.

So the matching marble should be '(a|)'

Upvotes: 1

Related Questions