Comment déboguer une erreur "[object ErrorEvent] levée" dans mes tests Karma / Jasmine?

Question

J'ai plusieurs tests qui échouent et qui ne produisent que [object ErrorEvent] thrown . Je ne vois rien dans la console qui m'aide à identifier le code incriminé. Dois-je faire quelque chose pour les retrouver?

[EDIT]: J'utilise Karma v1.70, Jasmine v2.7.0

Answer 1

Pour corriger cela, vous devez exécuter vos tests sans sourcemaps comme une solution de contournement:

CLI v6.0.8 et ci-dessus
--source-map=false

CLI v6.0.x les premières versions
--sourceMap=false

CLI v1.x
--sourcemaps=false

Raccourci ng test -sm=false peut également travailler

Il y a un sujet ouvert sur ce https://github.com/angular/angular-cli/issues/7296

Mise à JOUR: J'ai eu ce problème, donc je viens de migré vers la dernière cli et assurez-vous que tous les paquets sont mis à jour en package.json aussi j'ai entièrement réinstallé l' node_modules alors maintenant, le problème a disparu.

Answer 2

Si sourcemap = false ne vous aide pas, essayez 1) d’ouvrir votre navigateur d’exécution des tests 2) cliquez sur le bouton de débogage 3) ouvrez la console.

L'erreur sera là

Answer 3

Essayez si vous obtenez un message d'erreur plus descriptif en exécutant le test de la borne, comme ceci:

ng test -sm=false

Dans votre test, vous pouvez le remplacer

it('should...')

avec

fit('should...') 

Maintenant, seuls les tests précédée par ajustement sera exécuté. Laisser le navigateur ouvert après l'exécution du test, de l'exécution du test comme ceci:

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

---

Personnellement, j'ai rencontré cette erreur deux fois. Les deux ont été déclenchée uniquement lors de l'appel de luminaire.detectChanges().

La première fois, je l'ai résolu en utilisant la chaîne d'interpolation plus en sécurité dans mon .fichier html.

Dangereux exemple:

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

Coffre-fort(r) exemple (notez le point d'interrogation):

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

La même chose peut s'appliquer à la propriété de liaison:

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

---

La deuxième fois, j'ai été en utilisant un DatePipe dans mon .fichier html, mais la fantaisie de la propriété que je l'ai utilisé sur n'était pas une date.

.fichier html:

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

.ts (maquette de données) fichier (mal):

let startDate = 'blablah';

.ts (maquette de données) fichier (correct):

let startDate = '2018-01-26';

Answer 4

C'est parce que le jasmin cadre ne pouvez pas gérer les ErrorEvent type afin de ne pas extraire le message d'erreur et des appels error.toString() sur cet objet à la place.

Je viens de déposer un problème au jasmin repo https://github.com/jasmine/jasmine/issues/1594

Tant qu'il n'est pas fixe, vous pouvez temporairement patch installé jasmin package dans le dossier node_modules. Dans mon cas c'est

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

et puis modifiez la mise en œuvre de la ExceptionFormatter à partir de ce

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

pour ce

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

Elle aide à identifier le problème.

Answer 5

Pour moi, c'était lié au fait d'avoir une promesse résolue dans les ngOnInit d'un composant. Je devais utiliser async , fakeAsync et cocher ainsi que décaler le service asynchrone avec spyOn

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

Angular - Comment tester un composant avec un appel de service asynchrone