Bagaimana cara men-debug kesalahan "[objek ErrorEvent] dilempar" dalam pengujian Karma / Jasmine saya?

108

Saya memiliki beberapa tes gagal yang hanya menghasilkan [object ErrorEvent] thrown . Saya tidak melihat apa pun di konsol yang membantu saya menentukan kode yang melanggar. Apakah ada yang perlu saya lakukan untuk melacaknya?

[EDIT]: Saya menjalankan Karma v1.70, Jasmine v2.7.0

Darrell Brogdon
sumber
Bisakah Anda memasukkan lebih banyak kesalahan? Seperti beberapa baris kesalahan sebelum dan sesudah?
Kevin
2
[object ErrorEvent] thrownadalah semua yang dikatakannya. Tidak ada sebelum atau sesudah.
Darrell Brogdon
1
Semoga beruntung, saya baru saja mendapatkan masalah ini secara harfiah pada saat Anda memposting pertanyaan ini, ternyata itu adalah tag skrip "nakal" (bisa juga tautan css) yang perlu dihapus (masalah saya terkait ke CORS), atau dalam kasus css, saya baru saja menambahkan crossorigin = "anonim". Periksa kode Anda untuk tag script / css tersebut, dalam kasus saya, saya menemukan masalah tersebut disebabkan oleh komponen yang sama sekali berbeda!
TheDude
apakah kamu di cli sudut bukan? @DarrellBrogdon
kuncevic.dev
1
@TheDude Bagaimana Anda mempersempit skrip ini? Baris demi baris? Atau adakah beberapa proses debug yang membantu Anda mempersempit tempatnya? Saya mengalami masalah yang sama dan satu-satunya info yang harus saya sampaikan adalah pesan: Kesalahan terjadi setelah semua. Jika saya mengisolasi pengujian itu sendiri dengan mengubah it()ke fit(), meskipun hanya pengujian tunggal itu yang berjalan, error masih muncul. Adakah rekomendasi debug untuk jenis kesalahan ini?
Knight

Jawaban:

121

FYI: Anda dapat menemukan kesalahan persis yang muncul hanya dengan membuka DevTools Console setelah pengujian Anda berjalan.

Sebagai perbaikan cepat, Anda dapat mencoba menjalankan pengujian tanpa peta sumber :

CLI v6.0.8 dan yang lebih baru
--source-map=false

CLI v6.0.x versi awal
--sourceMap=false

CLI v1.x
--sourcemaps=false

Pintasan ng test -sm=falsemungkin juga berfungsi

Ada masalah terbuka tentang https://github.com/angular/angular-cli/issues/7296

UPDATE : Saya mengalami masalah itu juga, jadi saya baru saja bermigrasi ke cli terbaru dan memastikan bahwa semua paket diperbarui package.jsonjuga saya menginstal ulang sepenuhnya node_modulesjadi sekarang masalah telah hilang.

kuncevic.dev
sumber
3
ini berhasil untuk saya. Ini membantu mengungkapkan bahwa masalahnya ada pada pengikatan input yang tidak ditentukan.
JP Lew
10
Untuk sudut-cli 6, --sourceMap=falsesepertinya berfungsi.
skermajo
1
solusi depan khas
Mcsky
1
Solusi ini tidak berfungsi lagi. Dulu, tapi di 6.2.4 tidak
Mike
3
Saya mendapatkan Uncaught [Object Object] dilempar ke dalam komponen acak dan dalam beberapa proses saya tidak mendapatkan apa-apa ...: SI benci Angular Testing.
Gerardo Buenrostro González
51

Jika sourcemap = false tidak membantu, coba 1) buka browser Anda yang menjalankan pengujian 2) klik tombol debug 3) buka konsol

Kesalahannya akan ada di sana

masukkan deskripsi gambar di sini

Victor Bredihin
sumber
8
Saya bahkan tidak perlu mengklik tombol debug. Saya hanya bisa membuka konsol pengembang.
chris31389
Cemerlang! Saya menambahkan opsi peta sumber di mana-mana, tetapi pada akhirnya ini memberi saya info yang saya butuhkan
SkarXa
1
The --sourcemaps=falsehal tidak bekerja untuk saya, tapi ini bekerja dengan sempurna! Terima kasih!
mrClean
Tidak terlalu membantu jika browser menutup tepat setelah pengujian. Kurasa aku akan menulis banyak tes yang tidak berguna untuk menjaga jendela tetap terbuka, seperti manusia gua.
CoryCoolguy
24

Coba jika Anda mendapatkan pesan kesalahan yang lebih deskriptif dengan menjalankan tes dari terminal, seperti ini:

ng test -sm=false

Dalam pengujian Anda, Anda dapat mengganti

it('should...')

dengan

fit('should...') 

Sekarang hanya tes yang diawali dengan fit yang akan dijalankan. Untuk membiarkan browser terbuka setelah menjalankan pengujian, jalankan pengujian seperti ini:

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

Secara pribadi, saya mengalami kesalahan ini dua kali. Keduanya hanya dipicu saat memanggil fixture.detectChanges ().

Yang pertama kalinya, saya dipecahkan dengan menggunakan interpolasi string lebih aman dalam file html saya.

Contoh yang tidak aman :

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

Contoh Safe (r) (perhatikan tanda tanya):

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

Hal yang sama mungkin berlaku untuk pengikatan properti:

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

The kedua kalinya, saya menggunakan DatePipe dalam file html saya, tapi milik bohongan yang saya gunakan pada itu bukan kencan.

file .html:

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

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

let startDate = 'blablah';

.ts (mock-data) file ( benar ):

let startDate = '2018-01-26';
harryvederci
sumber
Ada komentar mengapa '?' interpretasi string lebih aman? Ini bekerja dalam skenario saya.
Dylan Kapp
2
@DylanKapp ini memeriksa apakah objek tersebut null sebelum mencoba membaca properti objek. Lihat angular.io/guide/template-syntax#safe-navigation-operator untuk detail selengkapnya.
Christian Rondeau
18

Ini karena framework Jasmine tidak dapat menangani jenis ErrorEvent sehingga tidak mengekstrak pesan error dan memanggil error.toString()objek tersebut.

Saya baru saja mengajukan masalah di repo jasmine https://github.com/jasmine/jasmine/issues/1594

Selama tidak diperbaiki, Anda dapat menambal paket jasmine yang terinstal untuk sementara di folder node_modules. Dalam kasus saya itu

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

dan kemudian ubah implementasi ExceptionFormatter dari ini

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

untuk ini

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

Ini membantu untuk mengidentifikasi masalah.

Ginie
sumber
3
Ini berhasil untuk saya di [email protected]. Namun, saya harus menambalnya node_modules/jasmine_core/lib/jasmine_core/jasmine.js
Roger Garza
Sangat bagus - butuh waktu sebentar untuk menemukan posting ini tetapi itu menyelamatkan pantat saya. Terima kasih. Versi inti melati yang sama
mr rogers
Setelah mengubahnya, itu hanya dicetak uncaughtuntuk saya yang tidak membantu. Jadi saya menambahkan kode untuk mencetak errorobjek dan propertinya. if(error){ // message+=error; for(var propName in error) { propValue = error[propName] message+='error prop: '+propName+', value: '+propValue; } } . Ini memberikan info tambahan yang membantu saya dalam debugging - misalnyaerror prop: filename, value: blob:http://localhost:9881/11777e3a-28d8-414e-9047-cee7d328e843
Manu Chadha
7

Bagi saya itu terkait dengan memiliki janji yang diselesaikan di ngOnInitsebuah komponen. Saya harus menggunakan async, fakeAsyncdan mencentang serta mematikan layanan asinkron denganspyOn

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

Angular - Cara menguji unit komponen dengan panggilan layanan asinkron

roo2
sumber
4

TL; DR: Ini mungkin terkait dengan pengujian perutean.

Saya mendapatkan [object ErrorEvent] thrownjuga. Satu jam kemudian, menelusurinya ke satu baris kode.

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

Masalahnya terletak pada lingkungan pengujian yang mencoba mengevaluasi this.route.snapshot.paramMap.get('id') .

Jika saya menggantinya dengan 0,[object ErrorEvent] thrown hilang.

UserService saya memiliki pengguna seperti ini:

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

Jadi 0dapatkan saja pengguna ini, di index0 .

Sebaliknya saat menjalankan aplikasi saya secara normal, this.route.snapshot.paramMap.get('id') dievaluasi saat pengguna memilih pengguna untuk diedit dari tabel pengguna saya.

Jadi di HTML saya, *ngFor="let user of users; index as i"loop untuk menampilkan semua pengguna routerLink="/edit/{{i}}"sehingga Anda dapat mengklik tombol edit untuk setiap pengguna, yang ketika diklik pergi ke misalnya http://localhost:4200/edit/0untuk mengedit detail pengguna admin yang disebutkan di atas.

Leo
sumber
3

bagaimana dengan pembersihan setelah setiap kasus uji:

  afterEach(() => {
    TestBed.resetTestingModule();
  })
Sebastian Brestin
sumber
Saya membaca bahwa TestBed tetap disetel ulang untuk setiap pengujian.
tanggal
1
Saya kasus saya itu membantu pembersihan untuk tes berikutnya.
Sebastian Brestin
1

Saya memiliki masalah yang sama. Salah satu cara kesalahan ini terjadi adalah ketika Anda mencoba mengakses apa pun yang null atau tidak ditentukan dalam template. Pastikan Anda memiliki pemeriksaan keamanan pada variabel tersebut.

Misalnya, ini akan menampilkan [object: ErrorEvent] ketika config tidak ditentukan pada pemuatan komponen.

template.html

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

Lakukan ini sebagai gantinya

<div *ngIf="config?.options">
   .....
   ......
</div>
kashpatel.dll
sumber
1

Apa yang dapat membantu adalah, jika Anda membuka jendela Chrome untuk runner pengujian Karma Anda, untuk membuka alat pengembang dan memeriksa konsol di sana. Bagi saya, ini membantu saya mengetahui bahwa aplikasi tidak dapat menggunakan metode Array.findIndex pada array yang tidak ditentukan (karena struktur data diatur oleh string tanggal, seperti data [2018] [3] [28], dan Saya kebetulan menunjuk ke tanggal yang salah), tetapi alih-alih hanya berhenti di kesalahan, pengujian terus berjalan.

OzzyTheGiant
sumber
Terima kasih banyak! Saya berharap info itu ada di konsol, Anda menghemat beberapa jam hidup saya :)
Sébastien Tromp
0

Bagi saya masalahnya adalah saya menjalani tes di mana saya secara tidak sengaja menggunakan perpustakaan auth0-lock .

Manolis
sumber
0

Tampaknya ini merupakan masalah asinkron, karena setelah saya menambahkan cukup banyak itdi salah satu spesifikasi komponen saya, saya bisa mendapatkan pesan kesalahan yang dapat digunakan yang menunjuk ke file dan baris di dalam file itu (terkait denganparamMap .

Di spesifikasi yang menguji ParamMap, saya baru saja menambahkan:

  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
sumber
0

Anda mungkin memiliki balapan atau pengujian asinkron yang tidak disiapkan dengan benar atau digunakan secara tidak benar. Saya akan berasumsi bahwa kasus debug perlu diperbaiki dan mengabaikan bahwa baris perintah lewat. Cukup terus menyegarkan runner pengujian karma (browser) jika kesalahan [object ErrorEvent] thrownmuncul sesekali, lalu pastikan Anda telah menerapkan kondisi asinkron dengan benar.

Semoga berhasil.

Pradosh kumar Mohapatra
sumber
0

[objek ErrorEvent] muncul

Kesalahan ini menunjukkan bahwa Anda memiliki sesuatu yang tidak ditentukan. Cara termudah untuk men-debugnya dari pengalaman saya adalah:

it('should create', () => {
    console.log(component);
    // You can check in the browser log which property is undefined
    });
Daniel Dimitrov
sumber
Ini sebenarnya telah menjadi pengingat yang paling berguna dari semuanya: dalam pengujian saya, saya memiliki layanan otentikasi tiruan, yang melewatkan suatu metode. Tampaknya tidak terkait, salah satu pengujian dalam sebuah komponen gagal, tetapi tidak saat diisolasi. Saya telah melacak yang tidak jelas [object ErrorEvent] thrownke metode yang hilang dari jarak jauh itu hanya berkat console.log :)
RedDree
0

Dalam kasus saya, masalahnya ada pada layanan, karena salah satu objek tidak akan ditentukan selama pengujian berjalan.

Contoh kode layanan adalah seperti di bawah ini akses ke dom,

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

Spesifikasi yang merujuk ke layanan ini gagal dengan kesalahan ' [objek ErrorEvent] dilempar '.

Saya mengejek objek layanan saya di dalam semua spesifikasi yang mengacu pada ini dan masalah terselesaikan.

Layanan tiruan

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

Dan gunakan objek layanan tiruan ini di penyedia seperti di bawah ini,

beforeEach(async(() => {

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

Saya menggunakan proxy di aplikasi saya yang ditentukan di proxy.conf.json seperti:

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

Karena Karma tidak mengetahui proxy ini, Karma terus membuat kesalahan di konsol sehingga titik akhir API tidak dapat ditemukan. Jadi setelah melihat dokumentasi Karma, saya menemukan bahwa yang dapat saya lakukan adalah menambahkan properti "proxy" di karma.conf.js dengan objek yang sama dari proxy.conf.json:

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

Error di konsol telah hilang, dan [object errorEvent] tidak lagi ditampilkan.

Arnold Layne
sumber
-1

Pada akhirnya, apa yang berhasil untuk saya:

    TestBed.resetTestingModule();
  })
Igor Korchagin
sumber