TypeError: Cannot read property 'next' of undefined BehaviorSubject

Question

我的代码在我运行和我 console.logs 时都在工作。日志表明 isQrCodeShown$ 不是未定义的。

我遇到错误 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();
    });
  });
});

这是我使用 BehaviorSubject 添加两个测试的时候 service.isQrCodeShown$

isQrCodeShown$ 在给定国家不在列表中时应为 false
isQrCodeShown$ 应该在给定国家在列表中时为真

我也是用ff命令测试的ng test --include file-path/file.spec.ts

Answer 1

setQrShown 不是箭头函数，这里

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

this 上下文丢失。您可以更详细：

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

或使setQrShown成为箭头函数：

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

TypeError: Cannot read property 'next' of undefined BehaviorSubject

TypeError: Cannot read property 'next' of undefined BehaviorSubject

angular

angular9