Weird RxJS error when trying to use Angular TestBed

Question

I'm trying to implement unit testing in my Angular project, but I'm running into an error message and I have no idea how to deal with that.

this is the code of my test file:

import {AuthComponent} from './auth.component';
import {ConditionalMerchandising} from '../../common/merchandising/conditionalmerchandising.service';
import {TestBed} from '@angular/core/testing';
import {RouterTestingModule} from '@angular/router/testing';
import {of} from 'rxjs';

describe('Auth base page', () => {

    let _cm: jasmine.SpyObj<ConditionalMerchandising>;

    beforeEach(() => {
        _cm = jasmine.createSpyObj('ConditionalMerchandising', [ 'getMerchandising' ]);

        TestBed.configureTestingModule({
            declarations: [ AuthComponent ],
            providers:    [ {provide: ConditionalMerchandising, useValue: _cm } ],
            imports:      [ RouterTestingModule ]
        }).compileComponents();
    });

    it ('loads the picture', () => {
        TestBed.get(ConditionalMerchandising).getMerchandising.and.returnValue(of(''));

        const fixture = TestBed.createComponent(AuthComponent);
        fixture.detectChanges();

        console.log(fixture.nativeElement.querySelector('.page-contents'));

    });

});

When I run it, I get this strange error:

ERROR in src/app/web-ui/auth/auth.component.ts(24,17): error TS2345: Argument of type 'import("C:/Users/Bart/workspace/epicuro-web/node_modules/rxjs/internal/types").OperatorFunction<any, any>' is not assignable to parameter of type 'import("C:/Users/Bart/workspace/epicuro-web/src/app/common/node_modules/rxjs/internal/types").OperatorFunction<any, any>'.
  Types of parameters 'source' and 'source' are incompatible.
    Type 'import("C:/Users/Bart/workspace/epicuro-web/src/app/common/node_modules/rxjs/internal/Observable").Observable<any>' is not assignable to type 'import("C:/Users/Bart/workspace/epicuro-web/node_modules/rxjs/internal/Observable").Observable<any>'.
      Types of property 'operator' are incompatible.
        Type 'import("C:/Users/Bart/workspace/epicuro-web/src/app/common/node_modules/rxjs/internal/Operator").Operator<any, any>' is not assignable to type 'import("C:/Users/Bart/workspace/epicuro-web/node_modules/rxjs/internal/Operator").Operator<any, any>'.
          Types of property 'call' are incompatible.
            Type '(subscriber: import("C:/Users/Bart/workspace/epicuro-web/src/app/common/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("C:/Users/Bart/workspace/epicuro-web/src/app/common/node_modules/rxjs/internal/types").TeardownLogic' is not assignable to type '(subscriber: import("C:/Users/Bart/workspace/epicuro-web/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("C:/Users/Bart/workspace/epicuro-web/node_modules/rxjs/internal/types").TeardownLogic'.
              Types of parameters 'subscriber' and 'subscriber' are incompatible.
                Property '_parentOrParents' is missing in type 'Subscriber<any>' but required in type 'Subscriber<any>'.

The line it's complaining about is const fixture = TestBed.createComponent(AuthComponent);

What is it that I'm doing wrong here?

Answer 1

It looks like the type mismatch of the observable return value. Try with this:

TestBed.get(ConditionalMerchandising).getMerchandising.and.returnValue(of({}));