Angular5 Karma test: Rxjs operator is not a function

Question

I have a component (MyComponent) that uses mergeMap - it builds, runs and does everything I want. No problems here. I removed the real implementation for this example.

During the Karma test I get an error thrown 'service.$find(...).mergeMap is not a function' . What am I doing wrong?

import {Observable} from "rxjs/Observable";

export component MyComponent {
  constructor(private service: Service) {
    let observable = service.$find().mergeMap(() => { return Observable.of() });
  }
}

I mock this service for the test: service.mock.ts

export class MockService {
  $find() { return Observable.of() }
}

I test this component in mycomponent.spec.ts

describe("MyComponent", () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [{provide: Service, useClass: Mockservice}],
      declarations: [MyComponent]
    })
  }
  // setup and it("should create") ...

}

I tried import {mergeMap} from "rxjs/Operators/mergeMap"; at several places as well.

Answer 1

If you're using Observable patching to add operators you need to add them from rxjs/add/operator/xyz :

import 'rxjs/add/operator/mergeMap';

For Observable (or static methods on the Observable class that create new Observables):

import 'rxjs/add/observable/of';

Or if this is only for your tests you could import from rxjs like (this loads all patches from rxjs/add as well):

import { Observable } from "rxjs";

Note, that this will include everything so it's not recommended in production.