Karma / Jasmine testlerimde bir "[nesne ErrorEvent] atılan" hatasını nasıl ayıklayabilirim?

Yalnızca çıktı veren birkaç başarısız testim var [object ErrorEvent] thrown. Konsolda sorun teşkil eden kodu belirlememe yardımcı olacak hiçbir şey görmüyorum. Bunların izini sürmek için yapmam gereken bir şey var mı?

[DÜZENLE]: Karma v1.70, Jasmine v2.7.0'ı çalıştırıyorum

Bilginize: Testleriniz çalışmaya başladıktan sonra DevTools Konsolu'nu açarak verilen hatayı tam olarak bulabilirsiniz .

Hızlı bir düzeltme olarak, testlerinizi kaynak haritalar olmadan çalıştırmayı deneyebilirsiniz :

CLI v6.0.8 ve üstü
--source-map=false

CLI v6.0.x eski sürümleri
--sourceMap=false

CLI v1.x
--sourcemaps=false

Kısayol ng test -sm=falseda işe yarayabilir

Bu https://github.com/angular/angular-cli/issues/7296 üzerinde açık bir sorun var

GÜNCELLEME : Bu sorunu da yaşadım, bu yüzden en son klibe geçtim ve tüm paketlerin güncellendiğinden emin package.jsonoldum ve node_modulesşimdi de sorun ortadan kalktı.

Sourcemap = false yardımcı olmazsa, 1) testleri çalıştıran tarayıcınızı açın 2) hata ayıklama düğmesine tıklayın 3) konsolu açın

Hata orada olacak

Testi terminalden çalıştırarak daha açıklayıcı bir hata mesajı alırsanız deneyin:

ng test -sm=false

Testinizde değiştirebilirsiniz

it('should...')

ile

fit('should...') 

Artık sadece öncesinde testleri uyum çalışacaktır. Testi çalıştırdıktan sonra tarayıcıyı açık bırakmak için testi şu şekilde çalıştırın:

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

Şahsen, bu hatayla iki kez karşılaştım. Her ikisi de yalnızca fixture.detectChanges () çağrılırken tetiklendi.

İlk kez, benim .html dosyasında daha güvenli dize interpolasyon kullanarak çözdü.

Güvenli olmayan örnek:

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

Güvenli (r) örneği (soru işaretine dikkat edin):

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

Aynısı mülk bağlama için de geçerli olabilir:

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

İkinci kez, benim .html dosyasında bir DatePipe kullanıyordum ama bunu kullandığını sahte tesiste tarih değildi.

.html dosyası:

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

.ts (mock-data) dosyası ( yanlış ):

let startDate = 'blablah';

.ts (mock-data) dosyası ( doğru ):

let startDate = '2018-01-26';

Bunun nedeni, yasemin çerçevesinin ErrorEvent türünü işleyememesi, dolayısıyla hata mesajını ayıklamaması ve error.toString()bunun yerine o nesneyi çağırmasıdır.

Yasemin deposunda bir sorun bildirdim https://github.com/jasmine/jasmine/issues/1594

Düzeltilmediği sürece, kurulu yasemin paketinizi node_modules klasörüne geçici olarak yama yapabilirsiniz. Benim durumumda

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

ve sonra ExceptionFormatter uygulamasını bundan değiştirin.

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

buna

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

Sorunun tanımlanmasına yardımcı olur.

Benim için bu, bir sözün kararlaştırılmasıyla ilgiliydi. ngOnInit bir bileşenin . Ben kullanmak zorunda kaldı async, fakeAsyncve kene gibi uyumsuz hizmeti ile stubbingspyOn

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

Angular - Eşzamansız servis çağrısıyla bileşen test etme

TL; DR: Test rotası ile ilgili olabilir.

Ben de alıyorum [object ErrorEvent] thrown. Bir saat sonra, bir satır kodla izlendi.

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

Sorun, değerlendirmeye çalışan test ortamından kaynaklanmaktadır this.route.snapshot.paramMap.get('id').

İle değiştirirsem 0, [object ErrorEvent] thrownkaybolur.

My userService'in şöyle bir kullanıcısı var:

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

Yani 0bu kullanıcıyı dizinden alır 0.

Aksi takdirde, normalde uygulamamı çalıştırırken, this.route.snapshot.paramMap.get('id') , kullanıcı, kullanıcı tablomdan düzenlemek için bir kullanıcı seçtiğinde değerlendirilir.

Bu yüzden benim HTML'imde, *ngFor="let user of users; index as i"tüm kullanıcıları görüntülemek için döngüler, routerLink="/edit/{{i}}"böylece her kullanıcı için düzenleme düğmelerine tıklayabilirsiniz, bu düğmelere tıklandığında örneğin http://localhost:4200/edit/0yukarıda belirtilen yönetici kullanıcının ayrıntılarını düzenlemek için gider .

peki ya her test senaryosundan sonra temizlik:

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

Ben de aynı sorunu yaşadım. Bu hatanın olmasının bir yolu, şablonda boş veya tanımlanmamış herhangi bir şeye erişmeye çalıştığınız zamandır. Bu değişken üzerinde güvenlik kontrolüne sahip olduğunuzdan emin olun.

Örneğin, yapılandırma bileşen yükünde tanımsız olduğunda bu [object: ErrorEvent] 'i atacaktır.

template.html

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

Bunun yerine bunu yap

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

Yardımcı olabilecek şey, geliştirici araçlarını açmak ve oradaki konsolu kontrol etmek için Karma test çalıştırıcınız için Chrome penceresi açıksa. Benim için bu, uygulamanın Array.findIndex yöntemini tanımsız bir dizide kullanamadığını öğrenmeme yardımcı oldu (çünkü veri yapısı, data [2018] [3] [28] gibi bir tarih dizesine göre düzenlendi ve Yanlış tarihe işaret ediyordum), ancak yine de hatayı durdurmak yerine, test çalışmaya devam etti.

Benim için sorun, yanlışlıkla auth0-lock kitaplığını kullandığım bir test yaptırmamdı .

Eşzamansız bir sorun gibi görünüyordu, çünkü itbileşen özelliklerimden birine yeterince s ekledikten sonra , o dosya içindeki bir dosyaya ve satıra işaret eden kullanılabilir bir hata mesajı alabildim (paramMap .

ParamMap'i test eden spesifikasyona ekledim:

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

Tam olarak doğru ayarlanmayan veya yanlış kullanılan bir yarış veya zaman uyumsuz testiniz olabilir. Hata ayıklama durumunun düzeltilmesi gerektiğini ve komut satırının geçtiğini göz ardı ettim. Hata olması durumunda karma test çalıştırıcısını (tarayıcı) yenilemeye devam edin.[object ErrorEvent] thrown aralıklı olarak görünmesi , ardından eşzamansız koşulu doğru şekilde uyguladığınızdan emin olun.

Umarım bu işe yarar.

[nesne ErrorEvent] atıldı

Bu hata, tanımlanmamış bir şeyinizin olduğunu gösterir. Deneyimlerime göre hata ayıklamanın en kolay yolu şudur:

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

Benim durumumda sorun hizmetle ilgiliydi, çünkü nesnelerden biri çalışan testler sırasında tanımlanamayacaktı.

Servis kodu örneği, doma erişimin aşağıdaki gibi bir şeydi,

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

Bu hizmete atıfta bulunan özellikler ' [nesne ErrorEvent] atıldı ' hatasıyla başarısız oluyordu .

Buna atıfta bulunan tüm özelliklerin içinde hizmet nesnemle dalga geçtim ve sorun çözüldü.

Sahte hizmet

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

Ve bu sahte hizmet nesnesini sağlayıcılarda aşağıdaki gibi kullanın,

beforeEach(async(() => {

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

Proxy.conf.json içinde tanımlanan uygulamamda aşağıdaki gibi bir proxy kullanıyordum:

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

Karma bu proxy'nin farkında olmadığı için, konsolda API uç noktasının bulunamadığına dair hataları tuttu. Karma belgelerine baktıktan sonra, yapabileceğim şeyin karma.conf.js'ye proxy.conf.json'daki aynı nesneyle "proxy" özelliğini eklemek olduğunu öğrendim:

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

Konsoldaki hata ortadan kalktı ve [object errorEvent] artık atılmadı.

Sonunda benim için ne işe yarayabilir:

    TestBed.resetTestingModule();
  })