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

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

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ął.

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

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';

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.

Dla mnie było to związane z wypełnieniem obietnicy w ngOnInitkomponencie. Musiałem użyć async, fakeAsynci zaznaczyć jak gasząc usługę transmisji asynchronicznej zspyOn

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

Angular - jak jednostkowo testować komponent z asynchronicznym wywołaniem usługi

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.

co z czyszczeniem po każdym przypadku testowym:

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

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>

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.

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

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

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.

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

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

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.

W końcu co może mi pomóc:

    TestBed.resetTestingModule();
  })