Error: No test scheduler initialized when using jasmine-marbles with Spectator in Angular test

Question

My component subscribes to an Observable in a Service, which is populated via an Ngrx selector, generalized here for brevity:

export class MyService {
  signInFalied$: Observable<boolean>;

  constructor(
    private store: Store<MyAppState>,
  ) {
    this.signInFailed$ = this.store.select(mySelectors.signInFailed);
  }
}

My component has conditional content based on this state value, and I would like to test that the correct content is displayed. In my test, I'm providing a mock for the service as such:

describe('My Test', () => {
  let spectator: SpectatorHost<MyComponent>;

  const createHost = createHostComponentFactory({
    component: MyComponent,
    declarations: [MyComponent],
    providers: [
      ...,
      mockProvider(MyService, {
        signInFailed$: cold('x', { x: null }),
        ...
      }),
    ],
    imports: [...]
  });
});

When I run tests, I get:

Error: No test scheduler initialized

Through searches I have tried setting my compile target to ES5

I'm also using the latest version of jasmine-marbles at this time: 0.6.0

What am I doing wrong?

Answer 1

I think I have faced this issue before. I am not sure about angular-spectator but for jasmine on the first beforeEach I call initTestScheduler and addMatchers.

Something like this:

import { addMatchers, initTestScheduler } from 'jasmine-marbles';

describe('MyComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
     ....
    }).compileComponents();

    initTestScheduler();
    addMatchers();
  }));
});

Answer 2

cold needs to be in an async scope. So you need to add a beforeEach and call this in an async scope:

import { async } from '@angular/core/testing';

describe('My Test', () => {
   beforeEach(async(() => {

       TestBed.configureTestingModule({
           providers: [
              ...,
              mockProvider(MyService, {
                signInFailed$: cold('x', { x: null }),
                ...
              }),
            ],
        })
        .compileComponents()
   });


});

Answer 3

This worked for me, the relevant bit being the providers array (have left the rest of the code for context only):

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [BusinessModule, RouterTestingModule, HttpClientTestingModule, ToastrModule.forRoot()],
    providers: [
      {
        provide: DataSourcesService,
        useValue: {
          activeBusinessDataSources$: cold('--x|', { x: activeBusinessDataSources })
        }
      }
    ]
  }).compileComponents();
});