☰

コンポーネント内のサービスのモック - モックは無視されます 質問する

tag-icon • tag-icon angular service mocking angular2-testing
コンポーネント内のサービスのモック - モックは無視されます 質問する

今回は、コンポーネントをテストするために、サービス (http 呼び出しを行う) をモック化しようとしています。

@Component({
  selector: 'ub-funding-plan',
  templateUrl: './funding-plan.component.html',
  styleUrls: ['./funding-plan.component.css'],
  providers: [FundingPlanService]
})
export class FundingPlanComponent implements OnInit {
  constructor(private fundingPlanService: FundingPlanService) {
  }

  ngOnInit() {
    this.reloadFundingPlans();
  }

  reloadFundingPlans() {
    this.fundingPlanService.getFundingPlans().subscribe((fundingPlans: FundingPlan[]) => {
      this.fundingPlans = fundingPlans;
    }, (error) => {
      console.log(error);
    });
  }
}

のドキュメンテーション(バージョン 2.0.0) では、サービスをモックする必要があることが説明されています。同じTestBed構成を使用します。

describe('Component: FundingPlan', () => {
  class FundingPlanServiceMock {
    getFundingPlans(): Observable<FundingPlan> { return Observable.of(testFundingPlans) }
  }

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [FundingPlanComponent],
      providers: [
        { provide: FundingPlanService, useClass: FundingPlanServiceMock },
      ]
    });

    fixture = TestBed.createComponent(FundingPlanComponent);
    component = fixture.componentInstance;
  });

  fit('should display a title', () => {
    fixture.detectChanges();
    expect(titleElement.nativeElement.textContent).toContain('Funding Plans');
  });

});

テストを実行すると、次の結果が得られます。

Error: No provider for AuthHttp!

これは実際のサービスでは使用されますが、モックでは使用されません。そのため、何らかの理由で、モックは挿入または使用されません。

何かアドバイスはありますか？ ありがとうございます！

ベストアンサー1

それは

@Component({
  providers: [FundingPlanService] <===
})

を使用するとプロバイダーのスコープがコンポーネントのみに限定されるため、は@Component.providersどのグローバル プロバイダーよりも優先されます@Component.providers。テストでは、Angular はモジュール スコープにモック サービスを作成し、コンポーネント スコープに元のサービスを作成します。

この問題を解決するために、Angular はTestBed.overrideComponent、テンプレートやプロバイダーなどをコンポーネント レベルでオーバーライドできる メソッドを提供します。

TestBed.configureTestingModule({
  declarations: [FundingPlanComponent]
});
TestBed.overrideComponent(FundingPlanComponent, {
  set: {
    providers: [
      { provide: FundingPlanService, useClass: FundingPlanServiceMock },
    ]
  }
})

参照:

おすすめ記事