Winkeltests fehlgeschlagen mit Fehler beim Ausführen von 'send' bei 'XMLHttpRequest'

145

Ich versuche meine eckige 4.1.0-Komponente zu testen -

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

Ein einfacher "sollte erstellen" -Test löst jedoch diesen kryptischen Fehler aus ...

NetworkError: Fehler beim Ausführen von 'send' bei 'XMLHttpRequest': Fehler beim Laden von 'ng: ///DynamicTestModule/module.ngfactory.js'.

Daher habe ich diese Frage gefunden, die darauf hindeutet, dass das Problem darin besteht, dass die Komponente @Input)_Parameter enthält, die jedoch nicht festgelegt sind, wenn ich meinen Test wie folgt ändere:

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

dann bekomme ich immer noch das gleiche Problem, ähnlich, wenn ich die @Input()Anmerkungen aus der Komponente entferne , immer noch kein Unterschied. Wie kann ich diese Tests bestehen?

George Edwards
quelle
1
Um eine Komponente zu erstellen, müssen Sie alle Abhängigkeiten angeben. Können Sie alle Ihre Testaufbauten zeigen? Ich werde versuchen, das Problem auf plnkr
Aleksandr Petrovskij
1
Ich hatte das gleiche Problem und fand die gleichen Beiträge wie Sie. Ich konnte eine Lösung finden. Am Ende habe ich die andere Frage gepostet, aber Sie können hier einen Blick darauf werfen: stackoverflow.com/a/45419372/6739517 Hoffe, es hilft!
Niles Tanner

Antworten:

342

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

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

BEARBEITEN:

Abkürzung dafür ist:

ng test -sm=false

Ab Winkel 6 lautet der Befehl:

ng test --source-map=false

Penghui
quelle
19
Du absoluter Held. Ich schlug meinen Kopf frustriert gegen die Wand, weil ich keine Informationen aus Angular Unit Test-Fehlermeldungen hatte, bis ich dies fand. Herzlichen Dank.
Alan Smith
1
Diese Antwort hat mir wirklich den Tag gerettet! Ich war kurz davor, die Entwicklung im Allgemeinen aufzugeben, nachdem ich den ganzen Tag und die ganze Nacht damit verbracht hatte, dies zu beheben, nur damit ich aufhören konnte, die Person zu sein, die den Build nicht bestanden hat
user1806692
Heute bin ich auf diese Fehlermeldung gestoßen: HeadlessChrome 65.0.3325 (Mac OS X 10.13.4) ERROR {"message": "Skriptfehler. \ Nat: 0: 0", "str": "Skriptfehler. \ Nat: 0 : 0 "} Wenn Sie --sourcemap = false entfernen, werden weitere Informationen angezeigt.
Penghui
11
ng test --source-map = false ... funktioniert in Angular CLI 6
danday74
@ danday74 FTW! Nach dem Schreiben komplizierter Testdateien ist es brutal, sich darauf einzulassen.
Brad Richardson
21

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

ng test --source-map=false

Vielleicht hilft es jemandem :).

jmuhire
quelle
8

Für meinen Fall gab es ein Scheindatenproblem und im Falle von Arraykehrte ich stringvom Schein 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 den tatsächlichen Fehler nicht mitgeteilt. Das Laufen ng test --source=falsezeigte auf den richtigen Fehler und die richtige Linie und half mir, ihn schnell zu beheben.

Oft passiert es, wenn Sie Daten verspotten, die unvollständig oder falsch sind.

Aniruddha Das
quelle
7

Sie können entweder die Eigenschaft input () in component.ts auf den Standardwert setzen

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

ODER

Ändern Sie Ihre Datei component.spec.ts wie folgt:

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

Wie oben hier vorgeschlagen: https://stackoverflow.com/a/45570571/7085047 Mein Problem war in meinem ngOnInit. Ich habe einen von Mock Swagger generierten REST-Controller-Proxy angerufen. Es gab null zurück und ich habe diese null abonniert, 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 diese 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);

Anschließend wurde die Instanz wie folgt zum Anbieter-Array des Tests hinzugefügt:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));
Datum Geek
quelle
Wenn Sie eine neue Frage haben, fragen Sie es bitte durch Klicken Frage stellen Taste. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies zur Bereitstellung des Kontexts beiträgt. - Aus dem Rückblick
Anton Balaniuc
Mein Symptom schien das gleiche zu sein wie das OP, also dachte ich, die Leute könnten die Lösung, die für mich funktioniert hat, nützlich finden ...
Datum Geek
3

Dies kann damit zusammenhängen, dass Chrome einen tatsächlichen Testfehler verbirgt. Der Testbereich wird einige nachgebildete http-Fabriken verwirren, die nicht geladen werden können, und daher ist dies der Fehler, den er meldet. Höchstwahrscheinlich liegt der Fehler im Bereich ngOnInit, in dem ein Objekt beispielsweise Unterobjekte erwartet und diese nicht definiert sind.

Um dem Fehler auf den Grund zu gehen, wechseln Sie vorübergehend zu PhantomJS, das anscheinend weniger unter diesen Initialisierungsfehlern leidet. Dadurch wird Ihnen hoffentlich der tatsächliche Fehler gemeldet. Bei mehreren Gelegenheiten stellte ich fest, dass ein bei der Initialisierung erwartetes Objekt nicht vollständig war. IE:

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

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

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

Ansonsten habe ich keine Lösung gefunden, um das Problem aus Chrome zu entfernen. Versuchen Sie wie immer, die Richtlinie "Code entfernen, bis der Fehler behoben ist" zu verwenden, um den Fehler zu beheben.

UPDATE: Beachten Sie, dass dies jetzt eine ziemlich alte Antwort ist. Ich würde die Verwendung von PhantomJS (EOL) nicht mehr empfehlen. Die Berichterstellung für Browsertests ist viel besser geworden. Wenn Chrome Ihnen Kummer bereitet, versuchen Sie es mit Firefox, das heutzutage auch sehr gute Tests durchführt.

PeterS
quelle
2

Ich hatte auch diesen Fehler, dessen Wahrheit ehrlich gesagt nicht gesprächig ist.

Es hing mit den HTTP-Aufrufen über meine Dienste zusammen

Ich benutze myService.ts mit 2 Methoden

get();
getAll();

Ich verspotte diesen Dienst: mockMyService.ts

Der Fehler war hier, weil meine Komponente die Methode getAll () verwendete, die ich vergessen hatte, im mockMyService zu implementieren. Deshalb habe ich einfach die folgende Methode hinzugefügt:

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

Deunz
quelle
2

Ich hatte das gleiche Problem und habe herausgefunden, dass Sie zur Behebung Ihrer Eingaben für die Komponente in der Methode vor jedem die folgenden Eingaben vornehmen 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.

Jayant Patil
quelle
1

In meinem Fall wurde der Täter observable.timeout(x).retry(y)irgendwo auf der zurückgegebenen Observable auf Serviceklassenebene angewendet, dann wieder in der Komponente, die diesen Service verwendete.

Bis zu angle-cli 1.4 hat im Browser alles richtig funktioniert. Dann begann es während der Karma-Tests zu scheitern (mit solch einem dummen Fehler). Die Lösung bestand natürlich darin, diese Timeout- / Wiederholungsoperatoren aufzuräumen.

Marcin R.
quelle
1

Für mich wird diese Meldung angezeigt, wenn ein Mock in meinen Tests falsch ist: Normalerweise geben Sie mockService in Ihrem Test-Bootstrap an. Wenn Ihr Mock unvollständig oder falsch ist, dann gibt Angular diesen dummen Fehler zurück.

Weitere Informationen zu meinem Fall hier

Rebolon
quelle
0

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 schlug bei meinem Test mit dem gleichen Fehler in diesem Beitrag fehl. Wie oben gezeigt, hatte ich zwei console.logs. Der erste ging durch, der zweite nicht. Also wurde mir klar, dass das Problem online ist. Const id = params.get ('id'); und ich habe es behoben.

Hoffe das wird jemandem helfen.

Josf
quelle