Come eseguo il debug di un errore "[Object ErrorEvent] generato" nei miei test Karma / Jasmine?

Ho diversi test non riusciti che generano solo [object ErrorEvent] thrown. Non vedo nulla nella console che mi aiuti a individuare il codice offensivo. C'è qualcosa che devo fare per rintracciarli?

[EDIT]: Sto eseguendo Karma v1.70, Jasmine v2.7.0

FYI: puoi trovare l'errore esatto generato semplicemente aprendo DevTools Console una volta che i test sono in esecuzione.

Come soluzione rapida puoi provare a eseguire i tuoi test senza mappe di origine :

CLI v6.0.8 e versioni successive
--source-map=false

Prime versioni della CLI v6.0.x.
--sourceMap=false

CLI v1.x
--sourcemaps=false

Anche la scorciatoia ng test -sm=falsepotrebbe funzionare

C'è un problema aperto su questo https://github.com/angular/angular-cli/issues/7296

AGGIORNAMENTO : Ho avuto anche quel problema, quindi ho appena migrato all'ultima cli e mi sono assicurato che tutti i pacchetti siano aggiornati, package.jsoninoltre ho reinstallato completamente il node_modulesquindi ora il problema è scomparso.

Se sourcemap = false non aiuta, prova a 1) aprire il browser eseguendo i test 2) fare clic sul pulsante di debug 3) aprire la console

L'errore sarà lì

Prova se ricevi un messaggio di errore più descrittivo eseguendo il test dal terminale, in questo modo:

ng test -sm=false

Nel tuo test, puoi sostituire

it('should...')

con

fit('should...') 

Ora verranno eseguiti solo i test preceduti da fit . Per lasciare il browser aperto dopo aver eseguito il test, esegui il test in questo modo:

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

Personalmente, ho riscontrato questo errore due volte. Entrambi sono stati attivati ​​solo quando si chiama fixture.detectChanges ().

La prima volta l'ho risolto utilizzando l'interpolazione delle stringhe in modo più sicuro nel mio file .html.

Esempio non sicuro :

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

Esempio Safe (r) (nota il punto interrogativo):

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

Lo stesso può valere per l'associazione di proprietà:

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

La seconda volta, stavo usando un DatePipe nel mio file .html, ma la proprietà mock su cui l'ho usato non era una data.

file .html:

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

File .ts (mock-data) ( sbagliato ):

let startDate = 'blablah';

File .ts (mock-data) ( corretto ):

let startDate = '2018-01-26';

Questo perché il framework jasmine non può gestire il tipo ErrorEvent, quindi non estrae il messaggio di errore e chiama error.toString()invece quell'oggetto.

Ho appena presentato un problema a jasmine repo https://github.com/jasmine/jasmine/issues/1594

Finché non viene risolto, puoi applicare temporaneamente una patch al pacchetto jasmine installato nella cartella node_modules. Nel mio caso lo è

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

e quindi modificare l'implementazione di ExceptionFormatter da questo

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

a questa

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

Aiuta a identificare il problema.

Per me era correlato al fatto che una promessa fosse risolta in ngOnInitun componente. Ho dovuto usare async, fakeAsynce spuntare così come spegnendo il servizio asincrono conspyOn

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

Angular: come eseguire un test unitario con una chiamata di servizio asincrona

TL; DR: potrebbe essere correlato al test del routing.

Anch'io sto diventando [object ErrorEvent] thrown. Un'ora dopo, l'ho tracciato su una riga di codice.

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

Il problema sta con l'ambiente di test che tenta di valutare this.route.snapshot.paramMap.get('id') .

Se lo sostituisco con 0, se ne [object ErrorEvent] thrownva.

Il mio userService ha un utente così:

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

Quindi 0ottiene solo questo utente, in index 0.

In caso contrario, quando si esegue normalmente la mia app, this.route.snapshot.paramMap.get('id')viene valutato quando l'utente seleziona un utente da modificare dalla mia tabella degli utenti.

Quindi, nel mio HTML, *ngFor="let user of users; index as i"scorre per visualizzare tutti gli utenti, quindi routerLink="/edit/{{i}}"puoi fare clic sui pulsanti di modifica per ciascun utente, che se cliccato vai ad es. http://localhost:4200/edit/0Per modificare i dettagli dell'utente amministratore di cui sopra.

che dire della pulizia dopo ogni test case:

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

Ho avuto lo stesso problema. Un modo in cui si verifica questo errore è quando si tenta di accedere a qualcosa di nullo o non definito nel modello. Assicurati di avere il controllo di sicurezza su quelle variabili.

Ad esempio, questo genererà [oggetto: ErrorEvent] quando la configurazione non è definita al caricamento del componente.

template.html

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

Fallo invece

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

Ciò che può aiutarti è, se hai la finestra di Chrome aperta per il tuo test runner Karma, aprire gli strumenti per sviluppatori e controllare la console lì. Per me, questo mi ha aiutato a scoprire che l'app non poteva utilizzare il metodo Array.findIndex su un array non definito (perché la struttura dei dati era organizzata da una stringa di data, come data [2018] [3] [28] e Mi è capitato di indicare la data sbagliata), ma invece di fermarsi all'errore, il test ha continuato a funzionare.

Per me il problema era che avevo un test in cui stavo accidentalmente utilizzando la libreria auth0-lock .

Sembrava essere un problema asincrono, perché dopo aver aggiunto un numero sufficiente di messaggi itin una delle specifiche del mio componente, sono stato in grado di ottenere un messaggio di errore utilizzabile che indicava un file e una riga all'interno di quel file (era correlato aparamMap .

Nelle specifiche che hanno testato ParamMap, ho appena aggiunto:

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

Potresti avere una gara o un test asincrono che non è impostato correttamente o è utilizzato in modo errato. Presumo che il caso di debug debba essere corretto e ignoro che la riga di comando passa. Continua ad aggiornare il karma test runner (browser) nel caso in cui l'errore[object ErrorEvent] thrown venga visualizzato in modo intermittente, quindi assicurati di aver implementato correttamente la condizione asincrona.

Si spera che funzioni.

[Object ErrorEvent] lanciato

Questo errore mostra che hai qualcosa di indefinito. Il modo più semplice per eseguire il debug dalla mia esperienza è:

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

Nel mio caso il problema era con il servizio, poiché uno degli oggetti non sarà definito durante l'esecuzione dei test.

Il codice di esempio del servizio era qualcosa di simile al di sotto dell'accesso a dom,

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

Le specifiche che fanno riferimento a questo servizio hanno avuto esito negativo con l'errore " [Object ErrorEvent] generato ".

Ho deriso il mio oggetto di servizio all'interno di tutte le specifiche che si riferivano a questo e il problema è stato risolto.

Servizio finto

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

E usa questo finto oggetto di servizio nei provider come di seguito,

beforeEach(async(() => {

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

Stavo usando un proxy nella mia applicazione definito in proxy.conf.json come:

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

Poiché Karma non era a conoscenza di questo proxy, continuava a riscontrare errori nella console che impedivano di trovare l'endpoint API. Quindi, dopo aver guardato nella documentazione di Karma, ho scoperto che quello che potevo fare era aggiungere la proprietà "proxies" in karma.conf.js con lo stesso oggetto da proxy.conf.json:

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

L'errore nella console era scomparso e l '[object errorEvent] non veniva più lanciato.

Alla fine, cosa può funzionare per me:

    TestBed.resetTestingModule();
  })