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

108

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

Darrell Brogdon
quelle
Können Sie mehr von dem Fehler einschließen? Wie mehrere Zeilen des Fehlers vorher und nachher?
Kevin
2
[object ErrorEvent] thrownist buchstäblich alles, was es sagt. Es gibt nichts vorher oder nachher.
Darrell Brogdon
1
Glücklicherweise habe ich dieses Problem buchstäblich erhalten, als Sie diese Frage stellten. Es stellte sich heraus, dass es sich um ein "Schurken" -Skript-Tag handelte (es könnte sich auch um einen CSS-Link handeln), das entfernt werden musste (mein Problem war verwandt) zu CORS) oder im Falle von CSS habe ich gerade crossorigin = "anonym" hinzugefügt. Überprüfen Sie Ihren Code auf solche Skript- / CSS-Tags. In meinem Fall habe ich festgestellt, dass das Problem durch eine völlig andere Komponente verursacht wurde!
TheDude
Bist du auf eckigem Cli, nicht wahr? @DarrellBrogdon
kuncevic.dev
1
@TheDude Wie haben Sie dieses Skript eingegrenzt? Zeile für Zeile? Oder gab es einen Debug-Prozess, der Ihnen dabei half, die Position einzugrenzen? Ich habe das gleiche Problem und die einzige Information, die ich weiter machen muss, ist die Meldung: Ein Fehler wurde in afterAll ausgelöst. Wenn ich den Test selbst durch Änderung isolieren it()zu fit(), obwohl nur der einzige Test läuft, wird der Fehler noch geworfen. Irgendwelche Debug-Empfehlungen für diese Art von Fehler?
Ritter

Antworten:

120

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.

kuncevic.dev
quelle
3
das hat bei mir funktioniert. Es zeigte sich, dass das Problem bei einer undefinierten Eingabebindung lag.
JP Lew
10
Für Angular-Cli 6 --sourceMap=falsescheint zu funktionieren.
Skermajo
1
typische
Frontlösung
1
Diese Lösung funktioniert nicht mehr. Früher, aber in 6.2.4 nicht
Mike
3
Ich bekomme Uncaught [Objekt Objekt] in zufällige Komponenten geworfen und in einigen Läufen bekomme ich nichts ...: SI hasse Angular Testing.
Gerardo Buenrostro González
51

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

Geben Sie hier die Bildbeschreibung ein

Victor Bredihin
quelle
8
Ich musste nicht einmal auf die Debug-Schaltfläche klicken. Das Öffnen der Entwicklerkonsole hat bei mir funktioniert.
chris31389
Brillant! Ich habe die Sourcemap-Option überall hinzugefügt, aber am Ende gab mir dies die Informationen, die ich brauchte
SkarXa
1
Das --sourcemaps=falseDing hat bei mir nicht funktioniert, aber das hat einwandfrei funktioniert! Danke dir!
MrClean
Hilft nicht wirklich, wenn der Browser direkt nach dem Test geschlossen wird. Ich schätze, ich werde ein paar nutzlose Tests schreiben, um das Fenster offen zu halten, wie eine Art Höhlenmensch.
CoryCoolguy
24

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';
harryvederci
quelle
Irgendein Kommentar warum '?' String-Interpretation ist sicherer? Diese Arbeit in meinem Szenario.
Dylan Kapp
2
@DylanKapp Hiermit wird überprüft, ob das Objekt null ist, bevor versucht wird, die Objekteigenschaft zu lesen. Weitere Informationen finden Sie unter angle.io/guide/template-syntax#safe-navigation-operator .
Christian Rondeau
18

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.

Ginie
quelle
3
Das hat bei mir in [email protected] funktioniert. Allerdings musste ich es patchen node_modules/jasmine_core/lib/jasmine_core/jasmine.js
Roger Garza
So gut - es hat eine Minute gedauert, diesen Beitrag zu finden, aber er hat meinen Hintern gerettet. Vielen Dank. Gleiche Jasmin-Core-Version
Herr Rogers
Nachdem uncaughtich dies geändert hatte , wurde es nur für mich gedruckt , was nicht hilfreich war. Also habe ich Code zum Drucken des errorObjekts und seiner Eigenschaften hinzugefügt . if(error){ // message+=error; for(var propName in error) { propValue = error[propName] message+='error prop: '+propName+', value: '+propValue; } } . Dies lieferte zusätzliche Informationen, die mir beim Debuggen halfen - zBerror prop: filename, value: blob:http://localhost:9881/11777e3a-28d8-414e-9047-cee7d328e843
Manu Chadha
4

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.

Löwe
quelle
3

Was ist mit der Reinigung nach jedem Testfall:

  afterEach(() => {
    TestBed.resetTestingModule();
  })
Sebastian Brestin
quelle
Ich habe irgendwo gelesen, dass das TestBed sowieso für jeden Test zurückgesetzt wird.
bgerth
1
In meinem Fall half es beim Aufräumen für die nächsten Tests.
Sebastian Brestin
1

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>
Kashpatel
quelle
1

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.

OzzyTheGiant
quelle
Vielen Dank! Ich hätte erwartet, dass die Informationen in der Konsole vorhanden sind. Sie haben ein paar Stunden meines Lebens gerettet :)
Sébastien Tromp
0

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

Manolis
quelle
0

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

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.

Pradosh Kumar Mohapatra
quelle
0

[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
    });
Daniel Dimitrov
quelle
Dies hat sich tatsächlich als die nützlichste Erinnerung von allen herausgestellt: In meinen Tests habe ich einen Scheinauthentifizierungsdienst, der eine Methode verpasst hat. Scheinbar nicht verwandt, schlug einer der Tests in einer Komponente fehl, jedoch nicht, wenn er isoliert war. Ich habe [object ErrorEvent] throwndas Unbekannte nur dank der console.log bis zu dieser entfernten fehlenden Methode aufgespürt :)
RedDree
0

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();
}));
Vishwa G.
quelle
0

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.

Arnold Layne
quelle
-1

Was kann am Ende für mich funktionieren:

    TestBed.resetTestingModule();
  })
Igor Korchagin
quelle