Wie debugge ich in meinen Karma / Jasmine-Tests einen Fehler "[object ErrorEvent] ausgelöst"?

Ich habe mehrere fehlgeschlagene Tests, die nur ausgegeben werden [object ErrorEvent] thrown. Ich sehe in der Konsole nichts, was mir hilft, den fehlerhaften Code zu lokalisieren. Muss ich etwas tun, um diese aufzuspüren?

[BEARBEITEN]: Ich verwende Karma v1.70, Jasmine v2.7.0

Zu Ihrer Information : Sie können den genauen Fehler finden, der nur durch Öffnen der DevTools-Konsole ausgelöst wird, sobald Ihre Tests ausgeführt werden.

Als Quickfix können Sie versuchen, Ihre Tests ohne Sourcemaps auszuführen :

CLI v6.0.8 und höher
--source-map=false

Frühere Versionen von CLI v6.0.x.
--sourceMap=false

CLI v1.x.
--sourcemaps=false

ng test -sm=falseMöglicherweise funktioniert auch die Verknüpfung

Es gibt ein offenes Problem unter https://github.com/angular/angular-cli/issues/7296

UPDATE : Ich hatte auch dieses Problem, also habe ich gerade auf die neueste CLI migriert und sichergestellt, dass alle Pakete aktualisiert wurden. package.jsonAußerdem habe ich das vollständig neu installiert, node_modulessodass das Problem jetzt behoben ist.

Wenn sourcemap = false nicht hilft, versuchen Sie 1) Ihren Browser zu öffnen, in dem die Tests ausgeführt werden, 2) auf die Debug-Schaltfläche zu klicken, 3) die Konsole zu öffnen

Der Fehler wird da sein

Versuchen Sie, eine aussagekräftigere Fehlermeldung zu erhalten, indem Sie den Test vom Terminal aus wie folgt ausführen:

ng test -sm=false

In Ihrem Test können Sie ersetzen

it('should...')

mit

fit('should...') 

Jetzt werden nur Tests ausgeführt, denen eine Anpassung vorausgeht . Führen Sie den Test folgendermaßen aus, um den Browser nach dem Ausführen des Tests geöffnet zu lassen:

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

Persönlich bin ich zweimal auf diesen Fehler gestoßen. Beide wurden nur beim Aufruf von fixture.detectChanges () ausgelöst.

Das erste Mal habe ich es gelöst, indem ich die String-Interpolation sicherer in meiner HTML-Datei verwendet habe.

Unsicheres Beispiel:

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

Sicher (r) Beispiel (beachten Sie das Fragezeichen):

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

Gleiches kann für die Eigentumsbindung gelten:

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

Das zweiten Mal habe ich eine DatePipe in meiner HTML-Datei verwendet, aber die Mock-Eigenschaft, für die ich sie verwendet habe, war kein Datum.

.html Datei:

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

.ts (Scheindaten) Datei ( falsch ):

let startDate = 'blablah';

.ts (Scheindaten) -Datei ( korrekt ):

let startDate = '2018-01-26';

Dies liegt daran, dass das Jasmin-Framework den ErrorEvent-Typ nicht verarbeiten kann, sodass die Fehlermeldung und die Aufrufe nicht extrahiert werden error.toString() stattdessen dieses Objekt .

Ich habe gerade eine Ausgabe bei Jasmin Repo eingereicht https://github.com/jasmine/jasmine/issues/1594

Solange dies nicht behoben ist, können Sie Ihr installiertes Jasmin-Paket vorübergehend im Ordner node_modules patchen. In meinem Fall ist es

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

und ändern Sie dann die Implementierung des ExceptionFormatter

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

dazu

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

Es hilft, das Problem zu identifizieren.

Für mich war es damit verbunden, dass ein Versprechen in ngOnIniteiner Komponente gelöst wurde . Ich hatte zu verwenden async, fakeAsyncund Zecken sowie Anstoßen aus dem Asynchron - Service mitspyOn

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

Angular - So legen Sie eine Komponententestkomponente mit einem asynchronen Serviceaufruf fest

TL; DR: Dies kann mit dem Testen des Routings zusammenhängen.

Ich werde [object ErrorEvent] thrownauch. Eine Stunde später wurde es auf eine Codezeile zurückgeführt.

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

Das Problem liegt in der Testumgebung, die versucht zu bewerten this.route.snapshot.paramMap.get('id').

Wenn ich es durch ersetze 0, [object ErrorEvent] throwngeht weg.

Mein userService hat einen Benutzer wie folgt:

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

Also 0bekommt nur dieser Benutzer am Index 0.

Andernfalls, wenn meine App normalerweise ausgeführt wird, this.route.snapshot.paramMap.get('id') ausgewertet, wenn der Benutzer einen Benutzer zum Bearbeiten aus meiner Benutzertabelle auswählt.

In meinem HTML- *ngFor="let user of users; index as i"Code werden also alle Benutzer angezeigt, routerLink="/edit/{{i}}"sodass Sie auf die Bearbeitungsschaltflächen für jeden Benutzer klicken können. Wenn Sie darauf klicken, gehen Sie beispielsweise http://localhost:4200/edit/0zu, um die oben genannten Details des Administratorbenutzers zu bearbeiten.

Was ist mit der Reinigung nach jedem Testfall:

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

Ich hatte das gleiche Problem. Ein Weg, wie dieser Fehler auftritt, ist, wenn Sie versuchen, auf alles zuzugreifen, was in der Vorlage null oder undefiniert ist. Stellen Sie sicher, dass diese Variablen auf Sicherheit überprüft werden.

Dies löst beispielsweise [Objekt: ErrorEvent] aus, wenn die Konfiguration beim Laden der Komponente nicht definiert ist.

template.html

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

Tun Sie dies stattdessen

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

Wenn Sie das Chrome-Fenster für Ihren Karma-Testläufer geöffnet haben, können Sie die Entwicklertools öffnen und die Konsole dort überprüfen. Für mich half dies herauszufinden, dass die App die Array.findIndex-Methode nicht für ein undefiniertes Array verwenden konnte (da die Datenstruktur durch eine Datumszeichenfolge wie data [2018] [3] [28] und organisiert war Ich habe zufällig auf das falsche Datum hingewiesen), aber anstatt nur bei dem Fehler anzuhalten, lief der Test weiter.

Für mich war das Problem, dass ich einen Test hatte, bei dem ich versehentlich die auth0-lock- Bibliothek verwendet habe.

Es schien ein asynchrones Problem zu sein, da ich, nachdem ich itin einer meiner Komponentenspezifikationen genügend s hinzugefügt hatte , eine verwendbare Fehlermeldung erhalten konnte, die auf eine Datei und eine Zeile in dieser Datei zeigte (auf die es sich bezogparamMap .

In der Spezifikation, die ParamMap getestet hat, habe ich gerade hinzugefügt:

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

Möglicherweise haben Sie ein Rennen oder einen Async-Test, der nicht richtig eingerichtet oder falsch verwendet wird. Ich würde annehmen, dass der Debug-Fall behoben werden muss und ignorieren, dass die Befehlszeile übergeben wird. Aktualisieren Sie einfach den Karma-Testläufer (Browser), falls der Fehler auftritt[object ErrorEvent] thrown zeitweise auftritt, und stellen Sie dann sicher, dass Sie die asynchrone Bedingung korrekt implementiert haben.

Hoffentlich funktioniert das.

[Objekt ErrorEvent] ausgelöst

Dieser Fehler zeigt, dass Sie etwas Undefiniertes haben. Der einfachste Weg, es aus meiner Erfahrung heraus zu debuggen, ist:

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

In meinem Fall lag das Problem beim Dienst, da eines der Objekte während der laufenden Tests undefiniert sein wird.

Service-Code-Beispiel war so etwas wie unter Zugriff auf dom,

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

Die Spezifikationen, die sich auf diesen Dienst beziehen, sind mit dem Fehler ' [Objekt ErrorEvent] ausgelöst ' fehlgeschlagen .

Ich habe mein Serviceobjekt in allen Spezifikationen verspottet, die sich darauf bezogen, und das Problem wurde behoben.

Mock-Service

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

Und verwenden Sie dieses Mock-Service-Objekt in den folgenden Anbietern:

beforeEach(async(() => {

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

Ich habe in meiner in proxy.conf.json definierten Anwendung einen Proxy verwendet, wie:

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

Da Karma diesen Proxy nicht kannte, wurden in der Konsole immer wieder Fehler gemeldet, dass der API-Endpunkt nicht gefunden werden konnte. Nachdem ich mir die Karma-Dokumentation angesehen hatte, stellte ich fest, dass ich die Eigenschaft "proxies" in karma.conf.js mit demselben Objekt aus proxy.conf.json hinzufügen konnte:

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

Der Fehler in der Konsole war verschwunden und das [Objekt errorEvent] wurde nicht mehr ausgelöst.

Was kann am Ende für mich funktionieren:

    TestBed.resetTestingModule();
  })