Testy kątowe kończą się niepowodzeniem i nie można wykonać polecenia „wyślij” na „XMLHttpRequest”


145

Próbuję przetestować mój komponent kątowy 4.1.0 -

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

Jednak prosty test „powinien utworzyć” zgłasza ten tajemniczy błąd ...

NetworkError: Nie udało się wykonać polecenia „send” w „XMLHttpRequest”: nie udało się załadować „ng: ///DynamicTestModule/module.ngfactory.js”.

więc znalazłem to pytanie, które sugeruje, że problem polega na tym, że komponent ma parametry, @Input)_które nie są ustawione, jednak jeśli zmodyfikuję mój test w ten sposób:

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

wtedy nadal mam ten sam problem, podobnie, jeśli usunę @Input()adnotacje z komponentu, nadal nie ma różnicy. Jak mogę sprawić, by te testy zdały?


1
Aby stworzyć komponent, musisz podać wszystkie zależności. Czy możesz pokazać wszystkie swoje ustawienia testowe? Spróbuję odtworzyć problem na plnkr
Aleksandr Petrovskij

1
Miałem ten sam problem i znalazłem te same posty co Ty. Udało mi się znaleźć rozwiązanie. Skończyło się na tym, że opublikowałem post na inne pytanie, ale możesz zajrzeć tutaj: stackoverflow.com/a/45419372/6739517 Mam nadzieję, że to pomoże!
Niles Tanner

Odpowiedzi:


342

To jest problem nowego Angular Cli. Uruchom test z, --sourcemaps=falsea otrzymasz odpowiednie komunikaty o błędach.

Zobacz szczegóły tutaj: https://github.com/angular/angular-cli/issues/7296

EDYTOWAĆ:

Skrótem do tego jest:

ng test -sm=false

Od kąta 6 polecenie brzmi:

ng test --source-map=false


19
Jesteś absolutnym bohaterem. Uderzałem głową w ścianę z frustracji brakiem informacji z komunikatów o błędach testów jednostki Angular, dopóki tego nie znalazłem. Bardzo zobowiązany.
Alan Smith

1
Ta odpowiedź naprawdę uratowała mi dzień! Byłem bliski rezygnacji na rozwój w ogóle po spędzeniu cały dzień i noc starając się naprawić tak mogłem przestać być osoba niezdaniem build
user1806692

Dzisiaj natrafiłem na ten komunikat o błędzie: HeadlessChrome 65.0.3325 (Mac OS X 10.13.4) ERROR {"message": "Błąd skryptu. \ Nat: 0: 0", "str": "Błąd skryptu. \ Nat: 0 : 0 "} Usunięcie --sourcemap = false pokazuje więcej informacji.
penghui

11
ng test --source-map = false ... działa w Angular CLI 6
danday74

@ danday74 FTW! Po napisaniu skomplikowanych plików testowych rozłączanie się z tym jest brutalne.
Brad Richardson

21

Miałem ten sam problem, używając angualar cli 6, użyłem tego tagu, aby uzyskać właściwy komunikat o błędzie:

ng test --source-map=false

Może to komuś pomoże :).


8

W moim przypadku wystąpił problem z fałszywymi danymi, aw przypadku Arraywróciłem stringz makiety.

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

Komunikat o błędzie jest naprawdę rozpraszający i nie informuje o rzeczywistym błędzie. Uruchomienie ng test --source=falsewskazało poprawny błąd i linię i pomogło mi szybko to naprawić.

Często zdarza się, że fałszywe dane są niekompletne lub nieprawidłowe.


7

Możesz ustawić właściwość input () na wartość domyślną w pliku component.ts

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

LUB

Zmodyfikuj plik component.spec.ts w następujący sposób,

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

4

Jak zasugerowano powyżej tutaj: https://stackoverflow.com/a/45570571/7085047 mój problem był w moim ngOnInit. Dzwoniłem do fałszywego proxy kontrolera REST generowanego przez Swagger. Zwracał wartość null, a ja subskrybowałem tę wartość null, co nie działa ...

Błąd wrócił:

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

Naprawiłem problem za pomocą ts-mockito: https://github.com/NagRock/ts-mockito

Dodałem kod, aby utworzyć przykładową instancję, taką jak ta:

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

Następnie dodałem instancję do tablicy dostawców testu w następujący sposób:

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

Jeśli masz nowe pytanie, zadaj je, klikając przycisk Zadaj pytanie . Dołącz link do tego pytania, jeśli pomaga to w dostarczeniu kontekstu. - Z recenzji
Anton Balaniuc

wydawało się, że mój symptom był taki sam jak OP, więc pomyślałem, że ludzie mogą uznać poprawkę, która zadziałała dla mnie ...
Datum Geek

3

Może to być związane z ukrywaniem przez Chrome rzeczywistego błędu testu. Obszar testowy będzie dezorientujący dla jakiejś fałszywej fabryki http, której nie może załadować i dlatego jest to błąd, który zgłosi. Najprawdopodobniej błąd będzie dotyczył obszaru ngOnInit, w którym, powiedzmy, obiekt oczekuje obiektów podrzędnych i nie są one zdefiniowane.

Aby spróbować dotrzeć do sedna błędu, przełącz się tymczasowo na PhantomJS, który wydaje się mniej cierpieć z powodu tych błędów inicjalizacji i miejmy nadzieję, że zgłosi rzeczywisty błąd. Kilka razy stwierdziłem, że obiekt oczekiwany podczas inicjalizacji nie był kompletny. TO ZNACZY:

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

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

Poprawienie obiektu pozwoliło PhantomJS ukończyć, a także Chrome przejść do następnego testu.

Poza tym nie widziałem rozwiązania, aby usunąć problem z Chrome. Jak zawsze, spróbuj zastosować zasadę „usuwaj kod, aż pojawi się błąd”, aby ścigać błąd.

AKTUALIZACJA: Zauważ, że jest to teraz dość stara odpowiedź, nie polecałbym już używania PhantomJS (EOL). Raporty z testów przeglądarki są znacznie lepsze i jeśli Chrome sprawia Ci przykrość, wypróbuj Firefoksa, który obecnie również bardzo dobrze wykonuje testy.


2

Miałem też ten błąd, który, prawdę mówiąc, nie jest zbyt rozmowny.

Było to związane z połączeniami HTTP przez moje usługi

Używam myService.ts z 2 metodami

get();
getAll();

Kpię z tej usługi: mockMyService.ts

Błąd był tutaj, ponieważ mój komponent używał metody getAll (), o której zapomniałem zaimplementować w mockMyService, więc właśnie dodałem metodę:

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

Błąd zniknął :)


2

Napotkałem ten sam problem i dowiedziałem się, że aby go naprawić, musisz ustawić dane wejściowe dla komponentu w metodzie przed każdym, jak pokazano poniżej:

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

To z pewnością rozwiąże Twój problem.


1

W moim przypadku winowajca został observable.timeout(x).retry(y)zastosowany gdzieś na zwróconym Observable na poziomie klasy usługi, a następnie ponownie w komponencie, który korzystał z tej usługi.

W przeglądarce wszystko działało poprawnie aż do angular-cli 1.4. Potem zaczął zawodzić podczas testów Karmy (z takim głupim błędem). Rozwiązaniem było oczywiście uporządkowanie tych operatorów przekroczenia limitu czasu / ponowienia.


1

Dla mnie ten komunikat pojawia się, gdy mock jest fałszywy w moich testach: zwykle podajesz mockService w swoim bootstrapie testów. Jeśli twoja próba jest niekompletna lub fałszywa, to angular zwraca ten głupi błąd.

Więcej informacji o mojej sprawie tutaj


0

Robiłbym to:

Dodaj console.log () s, wiersz po wierszu w ngOnint () i dowiedz się, jak daleko to zajdzie, a następnie sprawdź linię, przez którą nie przejdzie.

Dawny:

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

To zawiodło w moim teście z tym samym błędem w tym poście. Jak pokazano powyżej, miałem dwa console.logs. Pierwsza minęła, ale druga nie. Więc zdałem sobie sprawę, że problem dotyczy linii const id = params.get ('id'); i naprawiłem to.

Mam nadzieję, że to komuś pomoże.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.