web-dev-qa-db-fra.com

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

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

angularangular-clikarma-jasmine
88
Darrell Brogdon

Pour résoudre ce problème, vous devez exécuter vos tests sans recourir à des cartes mères comme solution de contournement:

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

CLI v6.0.x versions antérieures
--sourceMap=false

CLI v1.x
--sourcemaps=false

Le raccourci ng test -sm=false pourrait aussi fonctionner

Il existe un problème en suspens à ce sujet https://github.com/angular/angular-cli/issues/7296

UPDATE: J'avais ce problème aussi, alors je viens de migrer vers le dernier cli et je m'assure que tous les paquetages sont mis à jour dans package.json. J'ai également complètement réinstallé le node_modules.

108
Kuncevič

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

L'erreur sera là

 enter image description here

37
Victor Bredihin

Essayez si vous obtenez un message d'erreur plus descriptif en exécutant le test depuis le 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 l'exécution du test, exécutez le test comme suit: 

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

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

Le first time, je l’ai résolu en utilisant l’interpolation de chaîne de manière plus sûre dans mon fichier .html.

Dangereux exemple:

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

Safe (r) exemple (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>

La seconde heure, j’utilisais un DatePipe dans mon fichier .html, mais la propriété fictive sur laquelle je l’utilisais 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';
22
harryvederci

Cela est dû au fait que le framework jasmine ne peut pas gérer le type ErrorEvent. Il ne extrait donc pas le message d'erreur et appelle plutôt error.toString() sur cet objet.

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

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

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

puis changez l'implémentation de ExceptionFormatter de cette

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.

11
Ginie

Pour moi, il était lié à la résolution d'une promesse dans la variable ngOnInit d'un composant. Je devais utiliser async, fakeAsync et cocher ainsi que stubbing le service async avec spyOn

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

Angulaire - Comment tester un composant avec appel de service asynchrone

6
roo2

TL; DR: il peut être lié au test de routage.

Je reçois aussi [object ErrorEvent] thrown . Une heure plus tard, je l'ai tracé à 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îtra.

Mon userService a un utilisateur comme suit:

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

Donc, 0 obtient simplement cet utilisateur, à l’index 0.

Sinon, lors de l'exécution normale de mon application, this.route.snapshot.paramMap.get('id') est évalué lorsque l'utilisateur sélectionne un utilisateur à modifier à partir de ma table d'utilisateurs.

Donc, dans mon code HTML, *ngFor="let user of users; index as i" boucle pour afficher tous les utilisateurs, puis routerLink="/edit/{{i}}" afin que vous puissiez cliquer sur les boutons de modification de chaque utilisateur. http://localhost:4200/edit/0 pour modifier les détails de l'utilisateur admin susmentionné.

4
Leo

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

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

J'ai eu le même problème. Cette erreur se produit notamment lorsque vous essayez d'accéder à un élément null ou indéfini dans le modèle. Assurez-vous de vérifier la sécurité de 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>
1
kashpatel

Ce qui peut vous aider, c’est que si vous ouvrez la fenêtre Chrome pour votre programme d’essai Karma, ouvrez les outils de développement et vérifiez la console à cet endroit. 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 m'est arrivé de me faire indiquer la mauvaise date), mais pourtant, au lieu de simplement m'arrêter à l'erreur, le test a continué à s'exécuter.

0
OzzyTheGiant

Dans mon cas, le problème venait du service, car l’un des objets restait indéfini lors des tests en cours. 

L'échantillon 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 ' [objet ErrorEvent] renvoyé '.

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 de maquette 

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

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

beforeEach(async(() => {

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

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

0
Manolis

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 a gardé des erreurs dans la console qui empêchaient de trouver le noeud final de l’API . "proxies" dans karma.conf.js avec le même objet du fichier proxy.conf.json:

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

L'erreur dans la console avait disparu et [objet errorEvent] n'était plus lancé.

0
Arnold Layne

[objet ErrorEvent] levé

Cette erreur montre que vous avez quelque chose d'indéfini. Le moyen le plus simple de le déboguer à partir de mon expérience est: 

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

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

Vous pouvez avoir une course ou un test asynchrone qui n'est pas configuré correctement ou qui est utilisé de manière incorrecte. Je suppose que le cas de débogage doit être corrigé et ignore que la ligne de commande passe. Continuez simplement d’actualiser le programme d’exécution du test du karma (navigateur) au cas où l’erreur [object ErrorEvent] thrown apparaît par intermittence, puis assurez-vous que vous avez correctement implémenté la condition async.

Espérons que cela fonctionne.

0
Pradosh kumar Mohapatra