Angular-Tests schlagen fehl mit Fehler beim Ausführen von 'send' für 'XMLHttpRequest'

Dies ist ein Problem des neuen Angular Cli. Führen Sie Ihren Test mit --sourcemaps=false aus und Sie erhalten die richtigen Fehlermeldungen.

Details finden Sie hier: https://github.com/angular/angular-cli/issues/7296

EDIT:

Abkürzung dafür ist:

ng test -sm=false

Ab Winkel 6 lautet der Befehl:

ng test --source-map=false

Ich hatte das gleiche Problem mit eckig cli 6, ich habe dieses Tag verwendet, um die richtige Fehlermeldung zu erhalten:

ng test --source-map=false

Vielleicht hilft es jemandem :).

Für meinen Fall gab es ein Modelldatenproblem, und im Fall von Array gab ich string aus dem Modell zurück.

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

Die Fehlermeldung ist wirklich ablenkend und hat nicht den tatsächlichen Fehler angegeben. Das Ausführen von ng test --source=false zeigte den korrekten Fehler und die korrekte Linie und half mir, das Problem schnell zu beheben.

Dies geschieht häufig, wenn Sie falsche Daten unvollständig oder falsch darstellen.

Sie können input () property auf den Standardwert in component.ts setzen.

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

ODER 

Ändern Sie Ihre component.spec.ts -Datei folgendermaßen:

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

Wie oben hier vorgeschlagen: https://stackoverflow.com/a/45570571/7085047 Mein Problem war in meiner ngOnInit. Ich habe einen von einem Pseudo-Prahler generierten REST Controller-Proxy aufgerufen. Es gab Null zurück, und ich abonnierte diese Null, was nicht funktioniert ...

Der Fehler kam zurück:

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

Ich habe das Problem mit ts-mockito behoben: https://github.com/NagRock/ts-mockito

Ich habe Code hinzugefügt, um eine Scheininstanz wie folgt zu erstellen:

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

Und fügte die Instanz dann wie folgt zum Provider-Array des Tests hinzu:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));

Dies kann damit zusammenhängen, dass Chrome einen tatsächlichen Testfehler verdeckt. Der Testbereich verwirrt einige Mock-http-Factory, die nicht geladen werden kann. Daher wird der Fehler gemeldet. Höchstwahrscheinlich liegt der Fehler im Bereich ngOnInit, wo ein Objekt beispielsweise Unterobjekte erwartet und diese nicht definiert sind.

Um zu versuchen, dem Fehler auf den Grund zu gehen, wechseln Sie vorübergehend zu PhantomJS, was anscheinend weniger unter diesen Initialisierungsfehlern leidet. Dies wird Ihnen hoffentlich den tatsächlichen Fehler melden. Bei mehreren Gelegenheiten stellte sich heraus, dass ein Objekt, das bei der Initialisierung erwartet wurde, nicht vollständig war. IE:

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

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

Durch die Korrektur des Objekts konnte PhantomJS abgeschlossen werden und Chrome konnte mit dem nächsten Test fortfahren.

Abgesehen davon habe ich keine Lösung gefunden, um das Problem von Chrome zu entfernen. Wie immer versuchen und übernehmen Sie die "Entfernen Sie den Code, bis der Fehler geht" Richtlinie, um den Fehler zu jagen.

Ich hatte auch diesen Irrtum, dessen Wahrheit eher nicht gesprächig ist.

Es stand im Zusammenhang mit den HTTP-Aufrufen durch meine Dienste

Ich verwende myService.ts mit 2 Methoden

get();
getAll();

Ich verspotte diesen Service: mockMyService.ts

Der Fehler war hier, da meine Komponente die getAll () -Methode verwendete, die ich im mockMyService nicht implementieren konnte.

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

Fehler war weg :)

Für mich erscheint diese Meldung, wenn ein Mock in meinen Tests falsch ist: Normalerweise stellen Sie MockService in Ihrem Bootstrap für Tests bereit. Wenn Ihr Modell unvollständig oder falsch ist, geben Sie diesen dummen Fehler zurück.

Weitere Informationen zu meinem Fall hier

In meinem Fall wurde der Schuldige observable.timeout(x).retry(y) irgendwo auf dem zurückgegebenen Observable auf der Serviceklassenebene angewendet, dann wieder in der Komponente, die diesen Service verwendet hat.

Bis eckig-cli 1.4 funktionierte im Browser alles einwandfrei. Während des Karma-Tests fiel ein Fehler aus (mit einem solchen dummen Fehler). Die Lösung bestand natürlich darin, diese Zeitüberschreitungs-/Wiederholungsoperatoren aufzuräumen.

Ich bin mit dem gleichen Problem konfrontiert und habe herausgefunden, dass Sie zur Behebung dieses Problems Ihre Eingaben für die Komponente in der Methode beforeEach wie folgt festlegen müssen:

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

Dies wird Ihr Problem definitiv lösen.

Was ich tun würde, ist:

Fügen Sie console.log () s Zeile für Zeile in ngOnint () hinzu und finden Sie heraus, wie weit es geht. Überprüfen Sie dann die Zeile, die nicht durchlaufen wird.

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

Dies ist bei meinem Test mit dem gleichen Fehler in diesem Beitrag fehlgeschlagen. Wie oben gezeigt, hatte ich zwei console.logs. Der erste ist bestanden, der zweite aber nicht. Also wurde mir klar, dass das Problem online ist const id = params.get ('id'); und ich habe es behoben. 

Hoffe das hilft jemandem.