TypeError：无法读取未定义的 BehaviorSubject 的属性“next”

Question

My code is working when I run it and when I did console.logs. the logs tell that isQrCodeShown$ is not undefined.

I'm getting error TypeError: Cannot read property 'next' of undefined

TypeError: Cannot read property 'next' of undefined
    at <Jasmine>
    at SafeSubscriber.setQrShown [as _next] (http://localhost:9876/_karma_webpack_/src/app/modules/review-sign/services/qr-code/qr-code.service.ts:24:25)
    at SafeSubscriber.__tryOrUnsub (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Subscriber.js:183:1)
    at SafeSubscriber.next (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Subscriber.js:122:1)
    at Subscriber._next (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Subscriber.js:72:1)
    at Subscriber.next (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
    at MapSubscriber._next (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/operators/map.js:35:1)
    at MapSubscriber.next (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/util/subscribeToArray.js:3:1)
    at Observable._trySubscribe (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Observable.js:42:1)
    at Observable.subscribe (http://localhost:9876/_karma_webpack_/node_modules/rxjs/_esm2015/internal/Observable.js:28:1)

qr-code.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { QR_ALLOWED_COUNTRIES } from '../../configs/qr-code.config';

@Injectable()
export class QrCodeService {

  isQrCodeShown$: BehaviorSubject<boolean>;

  constructor() {
    this.isQrCodeShown$ = new BehaviorSubject(false);

    const MOCK_DATA_SERVICE = of({ country: 'PH' });

    MOCK_DATA_SERVICE
      .pipe(
        map(user => user.country)
      )
      .subscribe(this.setQrShown);
  }

  setQrShown(country: string): void {
    this.isQrCodeShown$.next(QR_ALLOWED_COUNTRIES.includes(country));
  }
}

qr-code.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { Subscription } from 'rxjs';
import { QR_TEST_COUNTRY } from '../../configs/qr-code.config';

import { QrCodeService } from './qr-code.service';

describe('QrCodeService', () => {
  let service: QrCodeService;

  beforeEach(() => {
    spyOn(console, 'log').and.callThrough();
    TestBed.configureTestingModule({
      providers: [QrCodeService]
    });
    service = TestBed.inject(QrCodeService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('isQrCodeShown$ should be false when the given country is not on the list', done => {
    const MOCK_FALSE_COUNTRY = 'ATLANTIS';

    service.setQrShown(MOCK_FALSE_COUNTRY);
    service.isQrCodeShown$.subscribe(isShown => {
      expect(isShown).toBeFalsy();
      done();
    });
  });

  it('isQrCodeShown$ should be true when the given country is on the list', done => {
    service.setQrShown(QR_TEST_COUNTRY);
    service.isQrCodeShown$.subscribe(isShown => {
      expect(isShown).toBeTruthy();
      done();
    });
  });
});

This is when I add the two tests using the BehaviorSubject service.isQrCodeShown$

• isQrCodeShown$ should be false when the given country is not on the list
• isQrCodeShown$ should be true when the given country is on the list

I also test it using the ff command ng test --include file-path/file.spec.ts

Answer 1

setQrShown isn't an arrow function, and here

//...
    .subscribe(this.setQrShown);

the this context is lost. You can either be more verbose:

    .subscribe(value => this.setQrShown(value));

or make setQrShown an arrow function:

setQrShown = (country: string): void => {