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

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

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.

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

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

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.

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

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.

bagaimana dengan pembersihan setelah setiap kasus uji:

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

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>

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.

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

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

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.

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

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

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.

Pada akhirnya, apa yang berhasil untuk saya:

    TestBed.resetTestingModule();
  })