Karma / Jasmineテストで「[object ErrorEvent] thrown」エラーをデバッグするにはどうすればよいですか？

いくつかの失敗したテストだけが出力されます[object ErrorEvent] thrown。問題のコードを特定するのに役立つコンソールに何も表示されません。これらを追跡するために必要なことはありますか？

[編集]：Karma v1.70、Jasmine v2.7.0を実行しています

参考までに：テストの実行後にDevTools Consoleを開くだけでスローされる正確なエラーを見つけることができます。

クイックフィックスとして、ソースマップなしでテストを実行することができます：

CLI v6.0.8以降
--source-map=false

CLI v6.0.x初期バージョン
--sourceMap=false

CLI v1.x
--sourcemaps=false

ショートカットng test -sm=falseも機能する可能性があります

そのhttps://github.com/angular/angular-cli/issues/7296に未解決の問題があります

更新：私にもその問題があったため、最新のCLIに移行し、すべてのパッケージが更新されていることを確認します。package.jsonまた、完全に再インストールしたnode_modulesため、問題は解決しました。

sourcemap = falseが役に立たない場合は、1）テストを実行しているブラウザーを開いてください2）デバッグボタンをクリックしてください3）コンソールを開いてください

エラーはそこにあります

次のように、ターミナルからテストを実行して、より説明的なエラーメッセージが表示されるかどうかを試します。

ng test -sm=false

あなたのテストでは、あなたは置き換えることができます

it('should...')

と

fit('should...') 

これで、fitの前のテストのみが実行されます。テストの実行後にブラウザを開いたままにするには、次のようにテストを実行します。

ng test -sm=false --single-run false

個人的に、私はこのエラーに2回遭遇しました。どちらも、fixture.detectChanges（）を呼び出したときにのみトリガーされました。

最初の時間は、私は私の.htmlファイルに、より安全に、文字列の補間を使用して、それを解決しました。

安全でない例：

<p>{{user.firstName}}</p>

Safe（r）の例（疑問符に注意）：

<p>{{user?.firstName}}</p>

プロパティバインディングについても同様です。

<p [innerText]="user?.firstName"></p>

二時間、私は自分の.htmlファイルにDatePipeを使用していたが、私は上でそれを使用することをモックプロパティは、日付はなかったです。

.htmlファイル：

<p>{{startDate | date: 'dd-MM-yyyy'}}</p>

.ts（モックデータ）ファイル（間違っています）：

let startDate = 'blablah';

.ts（モックデータ）ファイル（正しい）：

let startDate = '2018-01-26';

これは、jasmineフレームワークがErrorEventタイプを処理できないため、エラーメッセージを抽出せず、error.toString()代わりにそのオブジェクトを呼び出すためです。

jasmine repo https://github.com/jasmine/jasmine/issues/1594に問題を提出しました

修正されていない限り、node_modulesフォルダーにあるインストール済みのjasmineパッケージに一時的にパッチを適用できます。私の場合は

node_modules/jasmine/node_modules/lib/jasmine-core/jasmine.js

次に、ExceptionFormatterの実装をこれから変更します

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else {
    message += error.toString() + ' thrown';
}

これに

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else if (error.message) {
    message += error.message;
} else {
    message += error.toString() + ' thrown';
}

問題を特定するのに役立ちます。

私にとってngOnInitは、コンポーネントの中で解決された約束を持つことに関連していました。私はを使用する必要asyncがfakeAsyncあり、非同期サービスをチェックするだけでなくspyOn

beforeEach(async(
  //... initialise testbed and component
))
beforeEach(fakeAsync(
  // ... setup mocks then call:
  component.ngOnInit()
  tick()
  fixture.detectChanges()
))

Angular-コンポーネントを非同期サービス呼び出しで単体テストする方法

TL; DR：ルーティングのテストに関連している可能性があります。

私[object ErrorEvent] thrownも得ています。1時間後、1行のコードまでトレースしました。

this.username = this.userService.getUser(this.route.snapshot.paramMap.get('id'))[0];

問題は、評価を試みるテスト環境にありますthis.route.snapshot.paramMap.get('id')。

私はそれを置き換える場合は0、[object ErrorEvent] thrown離れて行きます。

私のuserServiceには次のようなユーザーがいます：

public users = [ ["admin", "First name", "Surname", etc... ] ].

したがって0、インデックスでこのユーザーを取得します0。

それ以外の場合、通常はアプリを実行しているthis.route.snapshot.paramMap.get('id')ときに、ユーザーがユーザーのテーブルから編集するユーザーを選択すると評価されます。

したがって、私のHTMLでは、*ngFor="let user of users; index as i"すべてのユーザーを表示するためにループしrouterLink="/edit/{{i}}"、各ユーザーの編集ボタンをクリックできるようになっています。クリックhttp://localhost:4200/edit/0すると、前述の管理ユーザーの詳細を編集できます。

各テストケース後のクリーニングについてはどうですか？

  afterEach(() => {
    TestBed.resetTestingModule();
  })

私も同じ問題を抱えていました。このエラーが発生する1つの方法は、テンプレートでnullまたは未定義のものにアクセスしようとした場合です。これらの変数の安全性チェックがあることを確認してください。

たとえば、コンポーネントのロード時に構成が定義されていない場合、これは[オブジェクト：ErrorEvent]をスローします。

template.html

<div *ngIf="config.options">
   .....
   ......
</div>

代わりにこれを行う

<div *ngIf="config?.options">
   .....
   ......
</div>

Karmaテストランナー用にChromeウィンドウを開いている場合は、開発者ツールを開いてコンソールを確認することが役立ちます。私にとって、これはアプリが未定義の配列に対してArray.findIndexメソッドを使用できないことを見つけるのに役立ちました（データ構造がdata [2018] [3] [28]などの日付文字列によって編成されていたため、私はたまたま間違った日付を指しています）が、エラーで停止するのではなく、テストを実行し続けました。

私にとっての問題は、auth0-lockライブラリを誤って使用していたテストがあったことです。

itコンポーネントの仕様の1つに十分なを追加した後、ファイルとそのファイル内の行を指す使用可能なエラーメッセージを取得できたため、これは非同期の問題であるように見えました（これはに関連していparamMapます）。

ParamMapをテストした仕様で、私は追加しました：

  describe('this test', () => {
    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });
  });

正しく設定されていないか、正しく使用されていないレースまたは非同期テストがある可能性があります。私はデバッグケースを修正する必要があると思い、コマンドラインがパスすることを無視します。エラー[object ErrorEvent] thrownが断続的に表示される場合に備えて、カルマテストランナー（ブラウザー）を更新し続け、非同期条件が正しく実装されていることを確認してください。

うまくいけばこれはうまくいきます。

[オブジェクトErrorEvent]スローされました

このエラーは、未定義のものがあることを示しています。私の経験からそれをデバッグする最も簡単な方法は：

it('should create', () => {
    console.log(component);
    // You can check in the browser log which property is undefined
    });

私の場合、問題はサービスにありました。オブジェクトの1つがテストの実行中に未定義になるためです。

サービスコードサンプルは、以下のdomへのアクセスのようなものでした。

  const elem = this.document.querySelector(element) as HTMLElement;
  elem.scrollIntoView({param1: ''});

このサービスを参照する仕様は、エラー ' [オブジェクトErrorEvent]がスローされました 'で失敗していました。

これを参照しているすべての仕様内にサービスオブジェクトをモックすると、問題が解決しました。

模擬サービス

class MockService {
serviceMethod(div) : void {
  testElement = document.querySelector('div') as HTMLElement;
  return testElement;
  } 
}

そして、以下のようにプロバイダーでこのモックサービスオブジェクトを使用します。

beforeEach(async(() => {

TestBed.configureTestingModule({
  declarations: [Component],
  providers: [
     { provide: Service, useClass: MockService },
    ],
})
  .compileComponents();
}));

次のように、proxy.conf.jsonで定義されているアプリケーションでプロキシを使用していました。

'/api': { 'target': 'some path', 'changeOrigin': false }

Karmaはこのプロキシを認識していなかったため、APIエンドポイントが見つからないというエラーがコンソールに表示され続けました。Karmaのドキュメントを調べたところ、karma.conf.jsに "proxyies"プロパティを、proxy.conf.jsonと同じオブジェクトを追加することでできることがわかりました。

proxies: { '/api': { 'target': 'some path', 'changeOrigin': false }}

コンソールのエラーはなくなり、[object errorEvent]はスローされなくなりました。

結局、私にとって何がうまくいくのか：

    TestBed.resetTestingModule();
  })