角度のテスト、私は私の角度4.1.0コンポーネントをテストしようとしています「XMLHttpRequestの」

Question

に「送信」 -

export class CellComponent implements OnInit { 
    lines: Observable<Array<ILine>>; 
    @Input() dep: string; 
    @Input() embedded: boolean; 
    @Input() dashboard: boolean; 
    constructor(
    public dataService: CellService, 
    private route: ActivatedRoute, 
    private router: Router, private store: Store<AppStore>) { 
    } 
} 

しかし、簡単なテストでは、この不可解なエラーがスローされます「作成する必要があります」。

..

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.

ので、私はこの問題は、コンポーネントが、私はそうのように私のテストを変更した場合、ただし、設定されていない@Input)_のparamsを持っていることを示唆しているthis質問を見つけました

私はコンポーネントから@Input()注釈を削除しても、同様の問題は解決しますが、まだ違いはありません。これらのテストをパスするにはどうしたらいいですか？

Answer 1

これはChromeが実際のテストエラーを隠すことに関連している可能性があります。テストエリアは読み込めない模擬HTTPファクトリを混乱させるので、それは報告するエラーです。ほとんどの場合、エラーはオブジェクトが予想されるサブオブジェクトであり、定義されていないngOnInit領域の周りにあります。

エラーの最下部に移動するには、一時的にPhantomJSに切り替えることをお勧めします。これらの初期化エラーはほとんど発生しません。実際のエラーが報告されます。いくつかの場面では、初期化時に期待されるオブジェクトが完全ではない場所にあることがわかりました。 IE：

fixture = TestBed.createComponent(MyComponent); 
    component = fixture.componentInstance; 

    component.object = {} 
// should be: 
    component.object = {"innerObjectThatIsNeeded" : []} 

PhantomJSは、次のテストに移動することもChromeを完了し、することが許可されたオブジェクトを修正。

これ以外にも、Chromeから問題を削除する方法はありませんでした。これまでと同じように、「エラーが発生するまで、コードを削除する」ポリシーを採用して、エラーを追跡します。

Answer 2

これは新しいAngular Cliの問題です。 --sourcemaps=falseでテストを実行すると、正しいエラーメッセージが表示されます。

は、ここに詳細を参照してください：https://github.com/angular/angular-cli/issues/7296

EDIT：このため

短縮形がある：私にとって

ng test -sm=false

Answer 3

モックは私のテストでfalsyあるときに、このメッセージが表示されます。通常、テストブートストラップにmockServiceを提供します。あなたのモックが不完全で虚偽の場合、角度はこの愚かなエラーを返します。私の場合、犯人はobservable.timeout(x).retry(y)そのサービスを使用した成分で再び、サービス・クラス・レベルに戻さ観測上のどこかに適用された私の場合here

Answer 4

に

詳細情報。

すべてが、角度-CLI 1.4まで、ブラウザのアップで正しく働いていました。カルマのテスト中に失敗し始めました（このようなばかげたエラーで）。ソリューションは、もちろん、これらのタイムアウト/リトライ演算子を整理することでした。

Answer 5

私の場合、モックデータの問題がありました。Arrayの場合は、模擬からstringを返していました。あなたモックデータが不完全または不正確であるとき

someApi = fixture.debugElement.injector.get(SomeApi); 
spyOn(someApi, 'someMethod') 
    .and.returnValue(Observable.of('this is not a string but array')); 

The error message is really distracting and was not telling the actual error. Running ng test --source=false pointed the correct error and line, and helped me to fix it quickly.

多くの時間は、それが起こります。

Answer 6

上記のように：https://stackoverflow.com/a/45570571/7085047私の問題は私のngOnInitにあった。私はモックスワッサー生成RESTコントローラープロキシを呼び出していました。それはnullを返していました、と私は動作しないことはnullに加入した...

エラーが戻ってきた：https://github.com/NagRock/ts-mockito

：

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

は、私は、TS-mockitoを使用して問題を修正しました

私はこのようなモックインスタンスを作成するためのコードを追加しました：

import { mock, instance, when } from 'ts-mockito'; 
import { Observable } from 'rxjs/Observable'; 
import { Observer } from 'rxjs/Observer'; 
import { MockScenario } from './vcmts-api-client/model/MockScenario'; 

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi); 
const obs = Observable.create((observer: Observer<MockScenario[]>) => { 
    observer.next(new Array<MockScenario>()); 
    observer.complete(); 
}); 
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs); 
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi); 

をし、テストのプロバイダアレイリクにインスタンスを追加しましたこれは：

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     ... 
     providers: [ 
     ... 
     { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi }, 
     ... 
     ]   
    }).compileComponents(); 
    })); 

Answer 7

私もこの誤りがありました。これはかなり言わず知らずです。 mockMyService.ts

エラーがここにあった：

これは、HTTP呼び出しに関連していたが

私は2つの方法

get(); 
getAll(); 

とmyService.tsを使用し、私はこのサービスをからかっています私のサービスの谷私のコンポーネントはgetAll（）メソッドを使用していたので、mockMyServiceに実装するのを忘れてしまったので、メソッドを追加しました。

private mockObjects = [ 
{ 
    'id': '1', 
    'champ1': 'TECH', 
    'champ2': 2, 
    'champ3': 'Data bidon' 
}, 
{ 
    'id': '2', 
    'champ1': 'TECH', 
    'champ2': 2, 
    'champ3': 'Data au pif' 
}, 
{ 
    'id': '3', 
    'champ1': 'FUNC', 
    'champ2': 3, 
    'champ3': 'Data quelconque' 
}, 
]; 

getAll(): Observable<any> { 
    return Observable.of(this.mockObjects); 
} 

は

して、行を検査し、にconsole.log（）S、ngOnint（中行の後の行を追加します）、それがどのようになるまでのところ見つける：

エラーが

Answer 8

は、私は何をやってしまうことである:)消えていましたそれは通過しません。

例：

ngOnInit() { 
    this.route.paramMap 
     .switchMap(params => { 
      this.busy = true; 
      this.updateErrors(null); 

      console.log(params); 

      **const id = params.get('id');** 
      console.log(id); 

      if (id === 'new') { 
       this.editMode = true; 
       return Observable.of(GroupComponent.newGroup()); 
      } 
      return this.apiService.getGroup(id); 
     }) 
    } 

これは、この記事では同じエラーで私のテストに失敗しました。上記のように、私は2つのconsole.logを持っていました。最初の1つはトグルを通過したが、2番目のトグルは通過しなかった。だから私は問題がライン上にあることに気づいたconst id = params.get（ 'id'）;と私はそれを修正した。

これは誰かを助けることを願っています。