angular - 使用 Jasmine 返回 TypeError 的单元测试：this.changeDetectorReference.markForCheck 不是函数

Question

我正在为 Angular 管道编写测试。该管道具有注入的 ChangeDetectorRef 并this.changeDetectorRef.markForCheck()在函数中被调用。

但是，当我编写并运行单元测试时，它失败并出现错误TypeError: this.changeDetectorReference.markForCheck is not a function

请问我该如何解决这个问题？代码块下方

百分比.pipe.ts

@Pipe({
  name: 'percent',
  pure: false
})
export class PercentPipe extends BasePercentPipe implements PipeTransform, OnDestroy {
  private onDestroy$: Subject<boolean>;
  private subscription: Subscription;
  private latestValue: any;

  constructor(private gbTranslateService: GbTranslateService, private changeDetectorReference: ChangeDetectorRef, @Inject(LOCALE_ID) locale: string) {
    super(locale);
    this.onDestroy$ = new Subject<boolean>();
  }

  public ngOnDestroy(): void {
    this.changeDetectorReference.detach();
    this.onDestroy$.next(true);
    this.onDestroy$.complete();
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  transform(value: any, digitsInfo?: string, locale?: string): any {

    if (value !== this.latestValue) {
      this.update(value, digitsInfo, locale);
    }
    return WrappedValue.wrap(this.latestValue);
  }

  private update(value: any, digitsInfo?: string, locale?: string): void {
    locale = locale || this.gbTranslateService.currentLang || undefined;
    this.latestValue = super.transform(value, digitsInfo, locale);

    this.changeDetectorReference.markForCheck();
  }
}

百分比.pipe.spec.ts

describe('Pipes', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ChangeDetectorRef, GbTranslateService]
    }).compileComponents();
  });

  describe('Percent pipe: ', () => {
    it('create an instance of Percent pipe', inject([ChangeDetectorRef, GbTranslateService], (changeDetectorRef: ChangeDetectorRef, gbTranslateService: GbTranslateService) => {
      const decimalPipe = new DecimalPipe(gbTranslateService, changeDetectorRef, 'en');
      expect(decimalPipe).toBeTruthy();
    }));

    it(`should transform decimal to percentage of any given number e.g. '0.2 => 20%'`,
      inject([ChangeDetectorRef], (changeDetectorRef: ChangeDetectorRef) => {
        const decimalPipe = new PercentPipe(changeDetectorRef, 'en');
        const testNumber = 0.2;
        const expectedResult = new WrappedValue('20%');
        expect(decimalPipe.transform(testNumber)).toEqual(expectedResult);
      }));
  });
});

错误

 TypeError: this.changeDetectorReference.markForCheck is not a function
            at <Jasmine>
            at PercentPipe.update (http://localhost:9876/_karma_webpack_/src/app/pipes/percent.pipe.ts:49:34)
            at PercentPipe.transform (http://localhost:9876/_karma_webpack_/src/app/pipes/percent.pipe.ts:40:12)
            at UserContext.Object (http://localhost:9876/_karma_webpack_/src/app/pipes/pipe.spec.ts:90:28)
            at TestBedViewEngine.execute (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:3791:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:4143:22)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:358:1)
            at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)

我感谢您的帮助

标签： angularjasmineangular-changedetection