web-dev-qa-db-ja.com

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

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

[編集]：私はカルマv1.70、ジャスミンv2.7.0を実行しています。

angularangular-clikarma-jasmine
97
Darrell Brogdon

これを修正するには、回避策として、ソースマップなしでテストを実行する必要があります。

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

_ update _ ：私もその問題を抱えていたので、最新のcliに移行し、すべてのパッケージがpackage.jsonで更新されていることを確認し、node_modulesを完全に再インストールしました。

110
Kuncevič

Sourcemap = falseで解決しない場合は、1）テストを実行しているブラウザを開く2）デバッグボタンをクリックする3）コンソールを開く

エラーがあるでしょう

enter image description here

40
Victor Bredihin

次のように端末からテストを実行してもっと説明的なエラーメッセージが表示されるか試してください。

ng test -sm=false

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

it('should...')

と

fit('should...')

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

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

個人的に、私は二度このエラーに遭遇しました。両方ともfixture.detectChanges（）を呼び出すときにだけ引き起こされました。

first は、私の.htmlファイルでより安全に文字列補間を使用することで解決しました。

安全でない example：

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

Safe（r） example（疑問符に注意）：

<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';
22
harryvederci

これは、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';
}

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

12
Ginie

私にとっては、コンポーネントのngOnInitで約束を解決することに関係していました。 async、fakeAsync、tickを使用し、非同期サービスをspyOnでスタブアウトする必要がありました。

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

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

7
roo2

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。

4
Leo

各テストケース後のクリーニングはどうなりますか。

  afterEach(() => {
    TestBed.resetTestingModule();
  })
1
Sebastian Brestin

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

たとえば、コンポーネントのロード時にconfigが未定義の場合、[object：ErrorEvent]がスローされます。

template.html 

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

代わりにこれをしてください

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

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

0
OzzyTheGiant

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

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

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

このサービスを参照している仕様は、エラー「 [object 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();
}));
0
Vishwa G

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

0
Manolis

私はproxy.conf.jsonで定義されている私のアプリケーションでプロキシを使用していました：

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

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

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

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

0
Arnold Layne

[object ErrorEvent]がスローされました

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

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

コンポーネントの仕様の1つに十分なitを追加した後、そのファイル内のファイルと行を指す使用可能なエラーメッセージを取得できたため（これは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();
    });
  });
0
inorganik

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

うまくいけばこれは動作します。

0
Pradosh kumar Mohapatra