Tes sudut gagal dengan Gagal menjalankan 'kirim' pada 'XMLHttpRequest'

145

Saya mencoba menguji komponen 4.1.0 sudut saya -

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

Namun, tes "seharusnya membuat" yang sederhana melempar kesalahan samar ini ...

NetworkError: Gagal menjalankan 'kirim' pada 'XMLHttpRequest': Gagal memuat 'ng: ///DynamicTestModule/module.ngfactory.js'.

jadi saya menemukan pertanyaan ini , yang menunjukkan bahwa masalah adalah komponen memiliki @Input)_params yang tidak diatur, namun, jika saya memodifikasi pengujian saya seperti:

  it('should create', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

maka saya masih mendapatkan masalah yang sama, sama halnya, jika saya menghapus @Input()anotasi dari komponen, masih tidak ada perbedaan. Bagaimana saya bisa lulus tes ini?

George Edwards
sumber
1
Untuk membuat komponen, Anda harus memberikan semua dependensi. Bisakah Anda menunjukkan semua pengaturan pengujian Anda? Saya akan mencoba mereproduksi masalah pada plnkr
Aleksandr Petrovskij
1
Saya memiliki masalah yang sama dan menemukan posting yang sama dengan yang Anda lakukan. Saya dapat menemukan solusi. Saya akhirnya memposting pertanyaan lain tetapi Anda dapat melihatnya di sini: stackoverflow.com/a/45419372/6739517 Semoga bermanfaat!
Niles Tanner

Jawaban:

342

Ini adalah masalah dari Angular Cli baru. Jalankan pengujian Anda dengan --sourcemaps=falsedan Anda akan mendapatkan pesan kesalahan yang tepat.

Lihat detailnya di sini: https://github.com/angular/angular-cli/issues/7296

EDIT:

Singkatan untuk ini adalah:

ng test -sm=false

Pada sudut 6 perintahnya adalah:

ng test --source-map=false

penghui
sumber
19
Anda pahlawan absolut. Saya membenturkan kepala ke dinding karena frustrasi dengan kurangnya info dari pesan kesalahan unit test Angular, sampai saya menemukan ini. Terima kasih banyak.
Alan Smith
1
Jawaban ini benar-benar menyelamatkan hariku! Saya hampir menyerah pada pengembangan secara umum setelah menghabiskan siang dan malam mencoba untuk memperbaiki ini supaya saya bisa berhenti menjadi orang yang gagal membangun
user1806692
Hari ini saya menemukan pesan kesalahan ini: HeadlessChrome 65.0.3325 (Mac OS X 10.13.4) ERROR {"message": "Script error. \ Nat: 0: 0", "str": "Script error. \ Nat: 0 : 0 "} Dan menghapus --sourcemap = false menunjukkan informasi lebih lanjut.
penghui
11
ng test --source-map = false ... berfungsi di Angular CLI 6
danday74
@ danday74 FTW! Setelah menulis file tes yang rumit, menutup telepon ini brutal.
Brad Richardson
21

Saya memiliki masalah yang sama menggunakan angualar cli 6, saya telah menggunakan tag ini untuk mendapatkan pesan kesalahan yang benar:

ng test --source-map=false

Mungkin itu akan membantu seseorang :).

Ya ampun
sumber
8

Untuk kasus saya ada masalah data mock dan dalam kasus Array, saya kembali stringdari mock.

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, 'someMethod')
  .and.returnValue(Observable.of('this is not a string but array'));

Pesan kesalahan benar-benar mengganggu dan tidak memberitahukan kesalahan sebenarnya. Berlari ng test --source=falsemenunjukkan kesalahan dan garis yang benar, dan membantu saya memperbaikinya dengan cepat.

Banyak kali itu terjadi ketika Anda mengejek data tidak lengkap atau salah.

Aniruddha Das
sumber
7

Anda dapat mengatur properti input () ke nilai default di component.ts

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '';

ATAU

Ubah file component.spec.ts Anda dengan cara berikut,

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '';  
   fixture.detectChanges();  
});
Mangesh Daundkar
sumber
4

Seperti yang disarankan di atas di sini: https://stackoverflow.com/a/45570571/7085047 masalah saya ada di saya ngOnInit. Saya sedang memanggil proxy pengendali REST tiruan yang dibuat-buat tiruan. Itu mengembalikan nol, dan saya berlangganan ke nol itu, yang tidak berfungsi ...

Kesalahan kembali:

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Saya memperbaiki masalah menggunakan ts-mockito: https://github.com/NagRock/ts-mockito

Saya menambahkan kode untuk membuat contoh tiruan seperti ini:

import { mock, instance, when } from 'ts-mockito';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { MockScenario } from './vcmts-api-client/model/MockScenario';

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi);
const obs = Observable.create((observer: Observer<MockScenario[]>) => {
  observer.next(new Array<MockScenario>());
  observer.complete();
});
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs);
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi);

Dan kemudian menambahkan instance ke array penyedia tes seperti ini:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));
Datum Geek
sumber
Jika Anda memiliki pertanyaan baru, silakan tanyakan dengan mengklik tombol Ajukan Pertanyaan . Sertakan tautan ke pertanyaan ini jika itu membantu menyediakan konteks. - Dari Ulasan
Anton Balaniuc
sepertinya gejala saya sama dengan OP, jadi saya pikir orang mungkin akan menemukan perbaikan yang berguna bagi saya ...
Datum Geek
3

Ini dapat dikaitkan dengan Chrome yang menyembunyikan kesalahan pengujian yang sebenarnya. Area pengujian akan membingungkan beberapa pabrik tiruan http yang tidak dapat dimuat dan karenanya itu adalah kesalahan yang akan dilaporkan. Kemungkinan besar kesalahannya adalah di sekitar area ngOnInit di mana suatu objek, katakanlah, mengharapkan sub objek dan mereka tidak didefinisikan.

Untuk mencoba dan sampai ke bagian bawah kesalahan, beralih ke PhantomJS sementara yang tampaknya kurang menderita dari kesalahan inisialisasi ini dan ini diharapkan akan melaporkan kesalahan yang sebenarnya kepada Anda. Beberapa kali saya temukan di mana objek yang diharapkan pada inisialisasi tidak lengkap. YAITU:

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.object = {}
// should be:
    component.object = {"innerObjectThatIsNeeded" : []}

Mengoreksi objek memungkinkan PhantomJS untuk menyelesaikan dan juga Chrome untuk melanjutkan ke pengujian berikutnya.

Selain itu saya belum melihat solusi untuk menghapus masalah dari Chrome. Seperti yang pernah dicoba dan mengadopsi kebijakan "hapus kode, sampai kesalahan" untuk mengejar kesalahan.

UPDATE: Perhatikan ini sekarang jawaban yang cukup lama, saya tidak akan merekomendasikan menggunakan PhantomJS lagi (EOL). Pelaporan pengujian browser telah menjadi jauh lebih baik dan jika Chrome memberi Anda kesedihan maka cobalah Firefox, yang juga menjalankan tes dengan sangat baik saat ini.

Peter
sumber
2

Saya juga memiliki kesalahan ini, yang mana kebenarannya dikatakan tidak banyak bicara.

Itu terkait dengan panggilan HTTP melalui layanan saya

Saya menggunakan myService.ts dengan 2 metode

get();
getAll();

Saya mengejek layanan ini: mockMyService.ts

Kesalahan ada di sini karena komponen saya menggunakan metode getAll () yang saya lupa implementasikan di mockMyService, jadi saya baru saja menambahkan metode:

private mockObjects = [
{
  'id': '1',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data bidon'
},
{
  'id': '2',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data au pif'
},
{
  'id': '3',
  'champ1': 'FUNC',
  'champ2': 3,
  'champ3': 'Data quelconque'
},
 ];

getAll(): Observable<any> {
  return Observable.of(this.mockObjects);
}

Kesalahan hilang :)

Deunz
sumber
2

Saya menghadapi masalah yang sama dan saya menemukan bahwa untuk memperbaikinya Anda harus mengatur input Anda untuk komponen dalam metode sebelumEach seperti yang ditunjukkan di bawah ini:

beforeEach(() => {
    fixture = TestBed.createComponent(CellComponent );
    cmp = fixture.debugElement.componentInstance;
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    fixture.detectChanges();
});

Ini pasti akan menyelesaikan masalah Anda.

Jayant Patil
sumber
1

Dalam kasus saya pelakunya observable.timeout(x).retry(y) diterapkan di suatu tempat di Observable kembali pada tingkat kelas layanan, sekali lagi dalam komponen yang menggunakan layanan itu.

Semuanya berfungsi dengan benar di browser hingga angular-cli 1.4. Kemudian mulai gagal selama tes Karma (dengan kesalahan konyol). Solusinya tentu saja untuk merapikan batas waktu / coba lagi operator ini.

Marcin R
sumber
1

Bagi saya pesan ini muncul ketika mock palsu dalam pengujian saya: biasanya Anda memberikan mockService di bootstrap tes Anda. Jika tiruan Anda tidak lengkap atau palsu, maka angular mengembalikan kesalahan bodoh ini.

Informasi lebih lanjut tentang kasus saya di sini

Pemberontakan
sumber
0

Apa yang akan saya lakukan adalah:

Tambahkan console.log () s, baris demi baris di ngOnint () dan cari tahu seberapa jauh, kemudian periksa baris yang tidak akan dilewatinya.

Ex:

ngOnInit() {
    this.route.paramMap
        .switchMap(params => {
            this.busy = true;
            this.updateErrors(null);

            console.log(params);

            **const id = params.get('id');**
            console.log(id);

            if (id === 'new') {
                this.editMode = true;
                return Observable.of(GroupComponent.newGroup());
            }
            return this.apiService.getGroup(id);
        })
    }

Ini gagal pada pengujian saya dengan kesalahan yang sama dalam posting ini. Seperti yang ditunjukkan di atas, saya punya dua console.logs. Yang pertama lulus, tapi yang kedua tidak. Jadi saya menyadari masalahnya ada pada baris const id = params.get ('id'); dan saya memperbaikinya.

Semoga ini bisa membantu seseorang.

Josf
sumber