Comment déboguer une erreur «[object ErrorEvent] thrown» dans mes tests Karma / Jasmine?

J'ai plusieurs tests échouants 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

FYI: vous pouvez trouver l'erreur exacte générée simplement en ouvrant la console DevTools une fois que vos tests sont en cours d'exécution.

En guise de correctif rapide, vous pouvez essayer d'exécuter vos tests sans sourcemaps :

CLI v6.0.8 et supérieur
--source-map=false

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

CLI v1.x
--sourcemaps=false

Le raccourci ng test -sm=falsepeut également fonctionner

Il y a un problème ouvert à ce sujet https://github.com/angular/angular-cli/issues/7296

MISE À JOUR : J'ai eu ce problème aussi, donc j'ai juste migré vers le dernier cli et m'assure que tous les paquets sont mis à jour package.jsonaussi j'ai complètement réinstallé le node_modulesdonc maintenant le problème a disparu.

Si sourcemap = false ne vous aide pas, essayez 1) d'ouvrir votre navigateur en exécutant les tests 2) cliquez sur le bouton de débogage 3) ouvrez la console

L'erreur sera là

Essayez si vous obtenez un message d'erreur plus descriptif en exécutant le test à partir du terminal, comme ceci:

ng test -sm=false

Dans votre test, vous pouvez remplacer

it('should...')

avec

fit('should...') 

Désormais, seuls les tests précédés de fit seront exécutés. Pour laisser le navigateur ouvert après avoir exécuté le test, exécutez le test comme ceci:

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

Personnellement, j'ai rencontré cette erreur deux fois. Les deux n'étaient déclenchés que lors de l'appel de fixture.detectChanges ().

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

Exemple dangereux :

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

Exemple Safe (r) (notez le point d'interrogation):

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

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

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

Le second fois, j'utilisais un DatePipe dans mon fichier .html, mais la propriété fictive sur laquelle je l'ai utilisée n'était pas une date.

Fichier .html:

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

Fichier .ts (mock-data) ( faux ):

let startDate = 'blablah';

Fichier .ts (mock-data) ( correct ):

let startDate = '2018-01-26';

Cela est dû au fait que le framework jasmine ne peut pas gérer le type ErrorEvent afin qu'il n'extrait pas le message d'erreur et appelle error.toString() à la place cet objet.

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

Tant qu'il n'est pas corrigé, vous pouvez temporairement patcher votre package jasmine installé dans le dossier node_modules. Dans mon cas c'est

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

puis modifiez l'implémentation de ExceptionFormatter à partir de ce

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

pour ça

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

Cela aide à identifier le problème.

Pour moi, c'était lié au fait d'avoir une promesse résolue dans ngOnInitun composant. J'ai dû utiliser async, fakeAsynccocher et supprimer le service asynchrone avecspyOn

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

TL; DR: Cela peut être lié au test du routage.

Je reçois [object ErrorEvent] thrownaussi. Une heure plus tard, il a retracé une ligne de code.

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

Le problème réside dans l'environnement de test qui tente d'évaluer this.route.snapshot.paramMap.get('id') .

Si je le remplace par 0,[object ErrorEvent] thrown disparaît.

Mon userService a un utilisateur comme ceci:

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

Alors 0obtient juste cet utilisateur, à l'index0 .

Sinon, lorsque j'exécute normalement mon application, this.route.snapshot.paramMap.get('id') est évalué lorsque l'utilisateur sélectionne un utilisateur à modifier dans ma table d'utilisateurs.

Donc, dans mon HTML, *ngFor="let user of users; index as i"boucle pour afficher tous les utilisateurs routerLink="/edit/{{i}}"afin que vous puissiez cliquer sur les boutons d'édition pour chaque utilisateur, qui, lorsqu'ils sont cliqués, vont par exemple http://localhost:4200/edit/0pour modifier les détails de l'utilisateur administrateur susmentionné.

qu'en est-il du nettoyage après chaque cas de test:

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

J'ai eu le même problème. Cette erreur se produit notamment lorsque vous essayez d'accéder à tout élément nul ou non défini dans le modèle. Assurez-vous d'avoir un contrôle de sécurité sur ces variables.

Par exemple, cela lancera [object: ErrorEvent] lorsque la configuration n'est pas définie lors du chargement du composant.

template.html

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

Faites ceci à la place

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

Ce qui peut aider, si vous avez la fenêtre Chrome ouverte pour votre lanceur de test Karma, ouvrez les outils de développement et vérifiez la console. Pour moi, cela m'a aidé à découvrir que l'application ne pouvait pas utiliser la méthode Array.findIndex sur un tableau non défini (car la structure de données était organisée par une chaîne de date, telle que data [2018] [3] [28], et Il se trouve que j'ai indiqué la mauvaise date), mais au lieu de simplement m'arrêter à l'erreur, le test a continué à fonctionner.

Pour moi, le problème était que j'avais un test où j'utilisais accidentellement la bibliothèque auth0-lock .

Cela semblait être un problème asynchrone, car après avoir ajouté suffisamment de its dans l'une de mes spécifications de composant, j'ai pu obtenir un message d'erreur utilisable qui pointait vers un fichier et une ligne dans ce fichier (il était lié à paramMap.

Dans la spécification qui a testé ParamMap, je viens d'ajouter:

  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();
    });
  });

Vous pouvez avoir une course ou un test asynchrone qui n'est pas tout à fait correctement configuré ou qui n'est pas utilisé correctement. Je suppose que le cas de débogage doit être corrigé et ignorer que la ligne de commande passe. Continuez simplement à actualiser le testeur de karma (navigateur) en cas d'erreur[object ErrorEvent] thrown apparaîtrait par intermittence, puis assurez-vous d'avoir correctement implémenté la condition asynchrone.

Espérons que cela fonctionne.

[object ErrorEvent] jeté

Cette erreur indique que vous avez quelque chose d'indéfini. Le moyen le plus simple de le déboguer d'après mon expérience est:

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

Dans mon cas, le problème était avec le service, car l'un des objets ne sera pas défini lors des tests en cours.

L'exemple de code de service était quelque chose comme ci-dessous l'accès à dom,

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

Les spécifications faisant référence à ce service échouaient avec l'erreur « [object ErrorEvent] thrown ».

Je me suis moqué de mon objet de service dans toutes les spécifications qui faisaient référence à cela et le problème a été résolu.

Service simulé

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

Et utilisez cet objet de service simulé dans les fournisseurs comme ci-dessous,

beforeEach(async(() => {

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

J'utilisais un proxy dans mon application défini dans proxy.conf.json comme:

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

Comme Karma n'était pas au courant de ce proxy, il n'arrêtait pas de tracer des erreurs dans la console indiquant que le point de terminaison de l'API était introuvable. Donc, après avoir regardé dans la documentation de Karma, j'ai découvert que ce que je pouvais faire était d'ajouter la propriété "proxies" dans karma.conf.js avec le même objet du proxy.conf.json:

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

L'erreur dans la console a disparu et l '[object errorEvent] n'est plus renvoyé.

En fin de compte, ce qui a fonctionné pour moi:

    TestBed.resetTestingModule();
  })