角度2テスト - コンポーネントを作成できません

Question

私のアプリは、多くのコンポーネントとサービス、およびその他のAngular2のものを持つモジュールがたくさんあります。

今、私は、TestBedのアプローチを使って、ジャスミン+カルマでユニットテストを作成しようとしています。

概念証明を明らかにする際にエラーが発生しました。 私はこのようになりますこれは、私のコンポーネントのいずれかのためのテストを作成しました：

let myCompServiceStub = {} as MyComponentService; 
let routerStub = {} as Router; 
let globalServiceStub = {} as MyGlobalService; 

describe('MyComponent',() => { 
    let component: MyComponent; 
    let fixture: ComponentFixture<MyComponent>; 

    beforeEach(async(() => { 
     TestBed 
      .configureTestingModule({ 
       imports: [MyModule], 
       providers: [ 
        { provide: MyComponentService, useValue: myCompServiceStub }, 
        { provide: Router, useValue: routerStub }, 
        { provide: MyGlobalService, useValue: globalServiceStub } 
       ] 
      }) 
      .compileComponents() 
      .then(() => { 
       fixture = TestBed.createComponent(MyComponent); 
       // component = fixture.componentInstance; 
      }); 
    })); 


    it('test it',() => { 
     expect(true).toBe(true); 
    }); 
}); 

MyModuleは鉱山それらのほとんど（他のモジュールの輸入の束を持っていますが、CommonModule, MaterializeModule, FormsModuleモジュールもありますが角度とマテリアライズを形成します）、いくつかのグローバルコンポーネントを定義します。プロバイダにはMyComponentServiceもあります。 インポートしたカスタムモジュールには、提供されているサービスがありません。

MyGlobalServiceであり、これは主成分であるAppComponentである。

私がテストを実行しようとすると、私はエラーを取得：

PhantomJS 2.1.1 (Windows 8 0.0.0) MyComponent test it FAILED 
     invokeTask@karma-shim.js:8833:41 
     onInvokeTask@karma-shim.js:10715:50 
     invokeTask@karma-shim.js:8832:53 
     runTask@karma-shim.js:8709:58 
     drainMicroTaskQueue@karma-shim.js:8976:43 
     run@karma-shim.js:4098:31 
     karma-shim.js:4111:33 
     flush@karma-shim.js:4466:13 
     resolvePromise@karma-shim.js:9045:79 
     karma-shim.js:9081:32 

をと私は本当に、それに引っかかって、私が間違って何をやっているは良いアイデアを持っていませんよ？

私のテストの依存関係を次のようになります。

"@angular/common": "~2.3.0", 
"@angular/compiler": "~2.3.0", 
"@angular/compiler-cli": "^2.3.1", 
"@angular/core": "~2.3.0", 
"@angular/forms": "~2.3.0", 
"@angular/http": "~2.3.0", 
"@angular/platform-browser": "~2.3.0", 
"@angular/platform-browser-dynamic": "~2.3.0", 
"@angular/platform-server": "^2.3.1", 
"@angular/router": "~3.3.0", 
"angular2-materialize": "6.3.0", 
"karma": "1.1.2", 
"karma-chrome-launcher": "^1.0.1", 
"karma-coverage": "^1.0.0", 
"karma-jasmine": "^1.0.2", 
"karma-phantomjs-launcher": "^1.0.0", 
"karma-remap-istanbul": "0.1.1", 
"karma-sourcemap-loader": "^0.3.7", 
"karma-webpack": "1.7.0", 
"@types/jasmine": "^2.5.36", 
"jasmine-core": "^2.3.4", 
"jasmine-spec-reporter": "^2.4.0", 

Answer 1

let fixture: ComponentFixture<MyComponent>; 

と

fixture = TestBed.createComponent(ListPRDComponent); 

MyComponentの= ListPRDComponent

試し：！

fixture = TestBed.createComponent(MyComponent); 

Answer 2

宣言

TestBed.configureTestingModule({ 
     declarations: [ MyComponent ], 
     imports:[FormsModule ], 
     providers:[] 
    }) 
    .compileComponents() 
    })); 

P.S.としてあなたのコンポーネントを設定しTestBed.configureTestingModuleあなたにも

import { MyComponent } from './MyComponent.component'; 
import { FormsModule } from '@angular/forms'; 

を経由して（あなたがやったかどうかを確認カント）あなたが実際にあなたのコンポーネントをインポートしていることを確認します私はFormsModuleもすべて私のテストコンポーネントにインポートします。