Jak zdebugować błąd „[object ErrorEvent] thrown” w moich testach Karma / Jasmine?


108

Mam kilka testów, które kończą się niepowodzeniem [object ErrorEvent] thrown. Nie widzę w konsoli niczego, co pomogłoby mi zlokalizować nieprawidłowy kod. Czy jest coś, co muszę zrobić, aby je wyśledzić?

[EDYCJA]: Używam Karma v1.70, Jasmine v2.7.0


Czy możesz dodać więcej informacji o błędzie? Jak wiele wierszy błędu przed i po?
Kevin

2
[object ErrorEvent] thrownto dosłownie wszystko, co mówi. Nie ma nic przed ani po.
Darrell Brogdon,

1
Na szczęście dostałem ten problem dosłownie w tym samym czasie, gdy publikowałeś to pytanie, okazało się, że był to "nieuczciwy" tag skryptu (może to być również link do css), który należało usunąć (mój problem był powiązany do CORS), lub w przypadku css, właśnie dodałem crossorigin = "anonymous". Sprawdź swój kod pod kątem takich tagów skryptu / css, w moim przypadku stwierdziłem, że problem jest spowodowany przez zupełnie inny komponent!
TheDude

czy jesteś na kanciastym CLI, prawda? @DarrellBrogdon
kuncevic.dev

1
@TheDude Jak zawęziłeś ten scenariusz? Linia po linii? A może był jakiś proces debugowania, który pomógł ci zawęzić, gdzie to było? Mam ten sam problem i jedyną informacją, którą muszę kontynuować, jest komunikat: W afterAll pojawił się błąd. Jeśli wyodrębnię sam test, zmieniając go it()na fit(), mimo że działa tylko ten pojedynczy test, błąd jest nadal zgłaszany. Jakieś zalecenia dotyczące debugowania tego typu błędów?
Knight,

Odpowiedzi:


121

FYI: możesz znaleźć dokładny błąd generowany po prostu przez otwarcie konsoli DevTools po uruchomieniu testów.

W ramach szybkiej poprawki możesz spróbować uruchomić testy bez map źródeł :

CLI 6.0.8 i nowsze
--source-map=false

Wczesne wersje CLI 6.0.x.
--sourceMap=false

CLI v1.x
--sourcemaps=false

Skrót ng test -sm=falseteż może działać

Jest otwarty problem dotyczący tego https://github.com/angular/angular-cli/issues/7296

AKTUALIZACJA : Miałem również ten problem, więc właśnie przeprowadziłem migrację do najnowszej CLI i upewniłem się, że wszystkie pakiety są zaktualizowane, a package.jsontakże w pełni ponownie zainstalowałem, node_moduleswięc teraz problem zniknął.


3
to działało dla mnie. Pomogło to ujawnić, że problem dotyczy niezdefiniowanego powiązania danych wejściowych.
JP Lew

10
--sourceMap=falseWydaje się , że dla angular-cli 6 działa.
skermajo

1
typowe rozwiązanie frontowe
Mcsky

1
To rozwiązanie już nie działa. Kiedyś tak było, ale w 6.2.4 tak nie jest
Mike

3
Dostaję Uncaught [obiekt obiekt] rzucany w losowych komponentach i w niektórych przebiegach nic nie dostaję ...: SI nienawidzę Angular Testing.
Gerardo Buenrostro González

51

Jeśli sourcemap = false nie pomoże, spróbuj 1) otworzyć przeglądarkę, uruchamiając testy 2) kliknij przycisk debugowania 3) otwórz konsolę

Błąd tam będzie

wprowadź opis obrazu tutaj


8
Nie musiałem nawet klikać przycisku debugowania. Samo otwarcie konsoli programisty działało dla mnie.
chris31389

Znakomity! Dodałem opcję sourcemap wszędzie, ale ostatecznie dało mi to informacje, których potrzebowałem
SkarXa

1
To --sourcemaps=falsenie działało dla mnie, ale działało bezbłędnie! Dziękuję Ci!
mrClean

Nie pomaga, jeśli przeglądarka zamyka się zaraz po teście. Chyba napiszę kilka bezużytecznych testów, żeby okno nie było otwarte, jak jakiś jaskiniowiec.
CoryCoolguy

24

Spróbuj, jeśli otrzymasz bardziej opisowy komunikat o błędzie, uruchamiając test z terminala, na przykład:

ng test -sm=false

W swoim teście możesz wymienić

it('should...')

z

fit('should...') 

Teraz będą wykonywane tylko testy poprzedzone dopasowaniem . Aby pozostawić otwartą przeglądarkę po uruchomieniu testu, uruchom test w następujący sposób:

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

Osobiście dwukrotnie napotkałem ten błąd. Oba zostały wyzwolone tylko podczas wywoływania fixture.detectChanges ().

Za pierwszym razem rozwiązałem to, używając bezpieczniejszej interpolacji ciągów w moim pliku .html.

Niebezpieczny przykład:

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

Przykład Safe (r) (zwróć uwagę na znak zapytania):

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

To samo może dotyczyć wiążących majątku:

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

Za drugim razem użyłem DatePipe w moim pliku .html, ale mock właściwość, na której go użyłem, nie była datą.

Plik .html:

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

Plik .ts (mock-data) ( nieprawidłowo ):

let startDate = 'blablah';

Plik .ts (mock-data) ( poprawne ):

let startDate = '2018-01-26';

Jakiś komentarz dlaczego? interpretacja strun jest bezpieczniejsza? Ta praca w moim scenariuszu.
Dylan Kapp,

2
@DylanKapp sprawdza, czy obiekt ma wartość null przed próbą odczytania właściwości obiektu. Więcej informacji można znaleźć na stronie angular.io/guide/template-syntax#safe-navigation-operator .
Christian Rondeau

18

Dzieje się tak, ponieważ struktura Jasmine nie obsługuje typu ErrorEvent, więc nie wyodrębnia komunikatu o błędzie i error.toString()zamiast tego wywołuje ten obiekt.

Właśnie zgłosiłem problem w repozytorium jaśminu https://github.com/jasmine/jasmine/issues/1594

Dopóki nie zostanie to naprawione, możesz tymczasowo załatać zainstalowany pakiet jasmine w folderze node_modules. W moim przypadku tak

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

a następnie zmień implementację ExceptionFormatter z this

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

do tego

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

Pomaga zidentyfikować problem.


3
To zadziałało dla mnie w jasmine-core@2.99.1. Jednak musiałem to załatać node_modules/jasmine_core/lib/jasmine_core/jasmine.js
Roger Garza

Tak dobrze - znalezienie tego posta zajęło minutę, ale uratowało mi to tyłek. Dzięki. Ta sama wersja z rdzeniem jaśminu
mr rogers

Po zmianie tego, wydrukował tylko uncaughtdla mnie, co nie było pomocne. Dodałem więc kod do drukowania errorobiektu i jego właściwości. if(error){ // message+=error; for(var propName in error) { propValue = error[propName] message+='error prop: '+propName+', value: '+propValue; } } . To dostarczyło dodatkowych informacji, które pomogły mi w debugowaniu - np.error prop: filename, value: blob:http://localhost:9881/11777e3a-28d8-414e-9047-cee7d328e843
Manu Chadha


4

TL; DR: Może to być związane z trasowaniem testów.

Ja [object ErrorEvent] thrownteż. Godzinę później prześledziłem to do jednej linii kodu.

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

Problem polega na tym, że środowisko testowe próbuje dokonać oceny this.route.snapshot.paramMap.get('id').

Jeśli zastąpię go 0, [object ErrorEvent] thrownznika.

Moja usługa userService ma takiego użytkownika:

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

Więc 0po prostu pobiera tego użytkownika w index 0.

W przeciwnym razie, podczas normalnego działania mojej aplikacji, this.route.snapshot.paramMap.get('id')jest oceniany, gdy użytkownik wybierze użytkownika do edycji z mojej tabeli użytkowników.

Tak więc w moim HTML *ngFor="let user of users; index as i"pętle wyświetlają wszystkich użytkowników, routerLink="/edit/{{i}}"więc możesz kliknąć przyciski edycji dla każdego użytkownika, które po kliknięciu przechodzą np. http://localhost:4200/edit/0Do edycji wyżej wspomnianych danych administratora.


3

co z czyszczeniem po każdym przypadku testowym:

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

Gdzieś wyczytałem, że TestBed i tak jest resetowany dla każdego testu.
bgerth

1
W moim przypadku pomogło to uporządkować do następnych testów.
Sebastian Brestin

1

Miałem ten sam problem. Jednym ze sposobów wystąpienia tego błędu jest próba uzyskania dostępu do czegokolwiek zerowego lub niezdefiniowanego w szablonie. Upewnij się, że masz sprawdzanie bezpieczeństwa tych zmiennych.

Na przykład spowoduje to zgłoszenie [obiekt: ErrorEvent], gdy konfiguracja jest niezdefiniowana podczas ładowania komponentu.

template.html

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

Zrób to zamiast tego

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

1

Pomocne może być to, że jeśli masz otwarte okno Chrome dla swojego testera Karma, otwórz narzędzia programistyczne i sprawdź tam konsolę. Pomogło mi to dowiedzieć się, że aplikacja nie może użyć metody Array.findIndex na niezdefiniowanej tablicy (ponieważ struktura danych została zorganizowana według ciągu daty, takiego jak data [2018] [3] [28]), a Tak się złożyło, że wskazywałem na niewłaściwą datę), ale zamiast po prostu zatrzymać się na błędzie, test trwał dalej.


Wielkie dzięki! Spodziewałbym się, że informacja będzie obecna w konsoli, zaoszczędziłeś kilka godzin mojego życia :)
Sébastien Tromp

0

Dla mnie problem polegał na tym, że miałem test, w którym przypadkowo korzystałem z biblioteki auth0-lock .


0

Wyglądało na to, że jest to problem asynchroniczny, ponieważ po dodaniu wystarczającej liczby itznaków w jednej ze specyfikacji mojego komponentu udało mi się uzyskać użyteczny komunikat o błędzie, który wskazywał na plik i wiersz w tym pliku (był powiązany z paramMap.

W specyfikacji, która testowała ParamMap, właśnie dodałem:

  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

Być może masz wyścig lub test asynchroniczny, który nie jest poprawnie skonfigurowany lub jest nieprawidłowo używany. Zakładałbym, że przypadek debugowania musi zostać naprawiony i zignorowałbym, że wiersz poleceń przechodzi. Po prostu odświeżaj program uruchamiający testy karmy (przeglądarkę) na wypadek, gdyby błąd [object ErrorEvent] thrownpojawił się sporadycznie, a następnie upewnij się, że poprawnie zaimplementowałeś warunek asynchroniczny.

Mam nadzieję, że to zadziała.


0

[obiekt ErrorEvent] został zgłoszony

Ten błąd wskazuje, że masz coś nieokreślonego. Najłatwiejszym sposobem debugowania go z mojego doświadczenia jest:

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

Okazało się, że jest to najbardziej przydatne przypomnienie ze wszystkich: w moich testach mam fałszywą usługę uwierzytelniania, która przegapiła metodę. Pozornie niezwiązany, jeden z testów w komponencie zakończył się niepowodzeniem, ale nie po izolacji. [object ErrorEvent] thrown
Wyśledziłem

0

W moim przypadku problem był z usługą, ponieważ jeden z obiektów będzie niezdefiniowany podczas wykonywania testów.

Przykładem kodu usługi był jak poniżej dostęp do domeny,

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

Specyfikacje odwołujące się do tej usługi zakończyły się niepowodzeniem i wystąpił błąd „ [obiekt ErrorEvent] zgłoszony ”.

Zakpiłem z obiektu usługi we wszystkich specyfikacjach, które do tego odnosiły się, i problem został rozwiązany.

Usługa pozorowana

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

I użyj tego pozorowanego obiektu usługi u dostawców, jak poniżej,

beforeEach(async(() => {

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

0

Używałem proxy w mojej aplikacji zdefiniowanej w proxy.conf.json na przykład:

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

Ponieważ Karma nie była świadoma tego serwera proxy, ciągle wyświetlała błędy w konsoli, że nie można znaleźć punktu końcowego API. Po przejrzeniu dokumentacji Karmy dowiedziałem się, że mogę dodać właściwość „proxy” w karma.conf.js z tym samym obiektem z proxy.conf.json:

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

Błąd w konsoli zniknął, a zdarzenie [object errorEvent] nie było już zgłaszane.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.