web-dev-qa-db-ja.com

テストする方法angular 2コンポーネントとその内部にネストされたコンポーネントとの依存関係？（TestBed.configureTestingModule）

テンプレートでコンポーネントB、c、Dを使用するコンポーネントAがあります。

###template-compA.html

    <comp-b></comp-b>
    <comp-c [myinput]="obj.myinput"></comp-c>
    <comp-d ></comp-d>

...等

簡単にするために、コンポーネントAのディレクティブは1つだけだとしましょう。

 ###template-compA.html

    <comp-b></comp-b>

私のcomp-bには独自の依存関係（サービスまたは他のcomp）があります。

Comp-aをこの方法でテストしたい場合：

TestBed.configureTestingModule({
    declarations: [comp-A],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

正しく機能しません。私もです：

TestBed.configureTestingModule({
    declarations: [comp-A, comp-B],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

Comp-bには独自の依存関係がないため、機能しません。そして、ここで私は混乱していますが、他のすべてのコンポーネントを毎回インポートしてリモックする必要がある場合、どのようにユニットテストを行うことができますか？非常に多くの作業のように見えます。別の方法はありますか？独自の依存関係を持つネストされたコンポーネントでコンポーネントをテストするためのベストプラクティスは何ですか？

どうもありがとう、

ステファン。

angularunit-testingjasminekarma-jasmine
23
Stefdelec

テストでcomp-bを参照する必要がない場合は、TestBed構成にschemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA]を追加するか、comp-Aのテンプレートをオーバーライドして、comp-bのタグを削除できます。

comp-bを参照する必要がある場合は、オーバーライドで具体的に依存関係を指定する必要はありません。

providersにoverrideComponentを設定する必要があるのは、コンポーネント自体に依存関係が提供されている場合のみです。 （comp-A.tsにプロバイダーリストがある場合）

comp-bはcomp-AServiceを必要とし、comp-AServiceはcomp-Aオーバーライドで提供されているとしましょう。comp-bはcomp-Aの子であり、comp-AServiceが提供されます。

これらの依存関係をapp.moduleまたはコンポーネント自体よりも高い場所で提供している場合、オーバーライドする必要はありません。たとえば、comp-bがcomp-AServiceとsomeOtherServiceを必要とする場合、両方ともapp.moduleで提供されますが、TestBedの構成は次のようになります。

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC },
    { provide: someOtherService, useValue: someOtherServiceSVC }
  ]
})

編集：

ネストされたコンポーネントのテストについては、こちらをご覧ください。

https://angular.io/guide/testing#nested-component-tests

16
Borquaye

@yurzuiのアドバイスに従う：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [comp-a],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));
2
Stefdelec