web-dev-qa-db-ja.com

Angular 2ユニットテスト-'ng：///DynamicTestModule/module.ngfactory.js'の読み込みに失敗しました

angular 2 webpackアプリケーション、すべてのwebpack、angular.io webpackガイドに従って作成されたカルマ構成があります。私はaotを使用していません。コンポーネントをテストするために、ジャスミン単体テストの仕様を書いています。最初に、非同期ブロックなしで試しました。その場合、ユニットテストは、fixture.detectChanges（）呼び出しまでしか実行されず、その後のコードは実行されません。 Fixture.detectChanges呼び出しが無限にブロックされるようです。

非同期ブロックにコードを含めてみました。その後、次のエラーが表示されます。エラー：「XMLHttpRequest」で「送信」の実行に失敗しました：「ng：/// DynamicTestModule /module.ngfactory.js」のロードに失敗しました

非同期のないコード

beforeeach(()=> {
TestBed.configureTestingModule({
imports:[],
declaration :[Mycomp],
providers:[{ provide:MyService, useclass:MyMockService}]
});
 fixture=TestBed.createComponent(Mycomp);
 console.log(' before detect changes'):
 fixture.detectChanges():
 console.log('after detect changes');// this is not getting   
    logged .. karma shows 0 of 1 executed successfully

 });

非同期あり

  beforeeach(async(()=> {
 TestBed.configureTestingModule({
  imports:[],
  declaration :[Mycomp],
  providers:[{ provide:MyService,       useclass:MyMockService}]
  });
   fixture=TestBed.createComponent(Mycomp);
    fixture.detectChanges():
  }));

エラーの取得dynamictestmodule/module.ngfactory.jsのロードに失敗しました

angularwebpackkarma-runner
60
Amit Gaikwad

昨日、この問題に自分で遭遇しました。問題は、テストで設定していないコンポーネントクラスにInput（）プロパティがあったことです。たとえば、my-component.tsの場合：

@Component({
  selector: 'my-component'
})
export class MyComponent {
  @Input() title: string;
}

およびmy-component.spec.ts：

beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  component.title = 'Hello there!' // <-- this is required!
  fixture.detectChanges();
});

または、コンポーネントのどこかにデフォルト値を指定できます。いずれにせよ、入力が設定されていない場合、テストはクラッシュし、直感的でないエラーが発生します。

注：ng test -sm=falseを実行すると、問題の原因となっている実際のエラーメッセージが表示されます。クレジット： https://stackoverflow.com/a/45802115/61311

99
newclearwinter

実際にエラーの原因を調べるには、ソースマップを無効にします。

Angle-cli> = v6.xの場合：

ng test --source-map=false

Angular-cli v1.xの場合：

ng test -sm=false

その後、より良いエラーが表示されます。 「未定義のプロパティ 'x'を読み取れません」エラーの原因となっている実際のソースファイル内。何らかの理由で、現在テスト中にソースマップにバグがあり、この不可解なエラーが発生します。

74
Dan Field

--sourcemaps=falseを使用してテストを実行すると、Karmaが静かに失敗することはありませんが、代わりにエラーに関する詳細が表示されます。

18
user776686

ダンフィールドの回答に追加

これは、Angular Cliバージョン1.2.2以降の問題です。 --sourcemaps=falseを使用してテストを実行すると、正しいエラーメッセージが表示されます。

ng test --sourcemaps = false

これの省略形は次のとおりです。

ng test -sm = false

詳細はこちら： https://github.com/angular/angular-cli/issues/7296

6
yugantar kumar

私もこの問題を抱えていましたが、それは不正な形式の模擬データによるものでした。私のコンポーネントには、http呼び出しを行うサービスがありました。

次のようなもの：（サービスコード）

getData() {
   return this.http.get(obj);
}

コンポーネントでは、この関数を呼び出してサブスクライブしました：（component code）

this.service.getData().subscribe((data) => {
  this.componentData = data.things; //**<=== part that broke everything**
}, (error) => {
  console.log(error);
});

解決策：

サービス関数をモックアウトすると、属性thingsを持つデータを返すことができませんでした。これがXMLHttpRequestの失敗の原因です。angularは、エラーがHTTPリクエストであるかのように発生したようです。モックされたHTTPリクエストで正しい属性を返したことを確認して、問題を修正しました。

これで問題が解決することを願っています。以下は、モックを実装するためのコードです。

（component.specs）

function fakeSubscribe(returnValue,errorValue) {
  return {
    subscribe:function(callback,error){
      callback(returnValue);
      error(errorValue);
    }
  }
}



 class MockService {
      getData() {
        var fakeData = {
          things:[]
        }
        return fakeSubscribe(fakeData,0);
      }
   }
5
Niles Tanner

これは、Angularでこれまでに遭遇した中で最も欺くエラーメッセージです。

私の場合、それはsendingとは何の関係もなく、XmlHttpRequestとは何の関係もありません-少なくともメッセージをフォローしようとするときに推測するレベルではありません。

クラス、つまりngrx/storeをモックすることでもありました。以前にモックアップクラスに含まれていなかった2つのObservableメソッドをコンテナーに導入しましたが、それらを使用し始めたときにそのことを忘れていました。モックアップに追加すると、エラーはなくなりました。

... XmlHttpRequestから 'send'を実行意味が何であれ、Karmaを満足させます。

3
user776686

翌日、同じエラーに悩まされました-今回はHTMLファイルに問題が埋もれていました。 *ngIfの単純な配列長テストを使用する

<ng-container *ngIf="myArray.length > 0">

にリファクタリングする必要がありました

<ng-container *ngIf="myArrayNotEmpty">

次のようなゲッターを使用します。

get myArrayNotEmpty(){
  return this.myArray && this.myArray.length > 0;
}

このようなさまざまな原因が、1つの非常に誤解を招き、役に立たないメッセージによってカバーされているにもかかわらず、私は少しイライラしています。

2
user776686

私の場合、私の模擬サービスには、ngOnInitメソッドのコンポーネントによってアクセスされるいくつかのパブリック変数がありませんでした。

1
maia

私もこの問題を抱えていました。 * ngIfチェックの1つで、コンポーネントの単純なnull参照エラーであることが判明しました。

Ng serveを実行し、ブラウザでコンポーネントがエラーなしで動作していることを確認するか、単にng test --source-map = falseを実行して、より有用なエラーメッセージを取得することをお勧めします。

0
Greg Quinn