각도 테스트가 실패하고 'XMLHttpRequest'에서 'send'를 실행하지 못함

각도 테스트가 실패하고 'XMLHttpRequest'에서 'send'를 실행하지 못함

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

하지만 단순한 "만들어야 한다"는 테스트는 이 암호화되지 않은 오류를 발생시킵니다.

네트워크 오류: 'XMLHttpRequest'에서 'send'를 실행하지 못했습니다.'ng:///DynamicTestModule/module.ngfactory.js'을(를) 로드하지 못했습니다.

그래서 저는 이 질문을 발견했는데, 이는 구성 요소가 가지고 있는 문제라는 것을 시사합니다.@Input)_설정되지 않은 매개 변수, 그러나 내가 테스트를 그렇게 수정하면:

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

그러면 여전히 같은 문제가 발생합니다, 비슷하게, 제가 제거한다면.@Input()구성 요소의 주석은 여전히 차이가 없습니다.어떻게 하면 이 시험들을 통과할 수 있습니까?

이것은 새로운 Angular CLI의 문제입니다.사하여실행으로 합니다.--sourcemaps=false올바른 오류 메시지가 표시됩니다.

자세한 내용은 여기를 참조하십시오. https://github.com/angular/angular-cli/issues/7296

편집:

약어는 다음과 같습니다.

ng test -sm=false

각도 6을 기준으로 명령은 다음과 같습니다.

ng test --source-map=false

저는 앵글러 CLI 6을 사용하는 것과 같은 문제가 있었습니다. 올바른 오류 메시지를 얻기 위해 이 태그를 사용했습니다.

ng test --source-map=false

아마도 누군가에게 도움이 될 것입니다 :).

제 경우에는 모의 데이터 문제가 있었고, 다음과 같은 경우에는Array돌아오는 길이었습니다.string모의로

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

오류 메시지는 정말 산만하고 실제 오류를 알려주지 않았습니다. 중입니다.ng test --source=false정확한 오류와 선을 지적하고 신속하게 수정할 수 있도록 도와주었습니다.

대부분의 경우 모의 데이터가 불완전하거나 부정확할 때 발생합니다.

component.ts에서 input() 속성을 기본값으로 설정할 수 있습니다.

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

OR

다음과 같은 방법으로 component.spec.ts 파일을 수정합니다.

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

위에서 제안한 바와 같이: https://stackoverflow.com/a/45570571/7085047 내 문제는 내 문제였습니다.ngOnInit가짜 스웨거로 만든 REST 컨트롤러 프록시를 부르고 있었습니다.null을 반환하고 있었고, 저는 null을 구독하고 있었는데, 그것은 작동하지 않습니다.

오류가 다시 발생했습니다.

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

저는 ts-sysito: https://github.com/NagRock/ts-mockito 를 사용하여 문제를 해결했습니다.

다음과 같은 모의 인스턴스를 만들기 위해 코드를 추가했습니다.

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

그런 다음 다음과 같이 인스턴스를 테스트의 공급자 어레이에 추가했습니다.

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

저는 같은 문제에 직면했고 이 문제를 해결하려면 아래와 같이 각 방법 앞에 있는 구성 요소에 대한 입력을 설정해야 한다는 것을 알게 되었습니다.

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

이렇게 하면 문제가 확실히 해결됩니다.

이는 Chrome이 실제 테스트 오류를 숨기는 것과 관련이 있을 수 있습니다.테스트 영역은 로드할 수 없는 일부 모의 http 공장을 혼란스럽게 할 것이며, 따라서 그것이 보고될 오류입니다.오류는 ngOnInit 영역 주변에서 발생할 가능성이 높습니다. 여기서 개체는 하위 개체를 예상하지만 하위 개체는 정의되지 않습니다.

오류의 진상을 파악하려면 팬텀으로 전환합니다.이러한 초기화 오류로 인해 일시적으로 피해를 덜 받는 것으로 보이는 JS는 실제 오류를 당신에게 보고하기를 바랍니다.초기화 시 예상되는 개체가 완료되지 않은 경우가 여러 번 있었습니다.IE:

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

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

허용된 팬텀 개체 수정JS를 완료하고 Chrome을 사용하여 다음 테스트를 진행합니다.

그 외에는 크롬에서 문제를 제거할 수 있는 해결책을 찾지 못했습니다.오류를 추적하기 위해 항상 "오류가 발생할 때까지 코드 제거" 정책을 채택합니다.

업데이트: 이것은 이제 꽤 오래된 대답입니다. 팬텀을 사용하는 것을 추천하지 않습니다.JS 더 이상 (EOL).브라우저 테스트 보고 기능이 훨씬 향상되었으며 크롬이 당신에게 슬픔을 주고 있다면 파이어폭스를 사용해 보십시오. 파이어폭스는 요즘 테스트도 정말 잘 실행됩니다.

저도 이 오류가 있었는데, 사실은 말이 별로 없다는 것입니다.

내 서비스를 통한 HTTP 통화와 관련이 있었습니다.

나는 두 가지 방법으로 나의 서비스.ts를 사용합니다.

get();
getAll();

나는 이 서비스를 조롱하고 있습니다: mock MyService.ts.

오류가 발생한 이유는 내 구성 요소가 mockMyService에서 구현하는 것을 잊어버린 getAll() 메서드를 사용하고 있었기 때문에 다음 메서드를 추가했습니다.

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

오류가 사라졌습니다 :)

나의 경우 범인은observable.timeout(x).retry(y)서비스 클래스 수준에서 반환된 관찰 가능한 위치에 적용된 다음 해당 서비스를 사용 중인 구성 요소에 다시 적용됩니다.

앵귤러-cli 1.4까지 브라우저에서 모든 것이 올바르게 작동했습니다.그런 다음 카르마 테스트에서 실패하기 시작했습니다(그런 어리석은 오류가 있었습니다.물론 해결책은 이러한 시간 초과/재시도 연산자를 정리하는 것이었습니다.

나에게 이 메시지는 테스트에서 모의가 거짓일 때 나타납니다. 보통 당신은 테스트 부트스트랩에서 모의 서비스를 제공합니다.만약 당신의 모의실험이 불완전하거나 거짓이라면, 각도는 이 바보 같은 오류를 반환합니다.

내 사례에 대한 자세한 정보는 여기에 있습니다.

제가 하고 싶은 일은 다음과 같습니다.

lineingOnint() 뒤에 console.log()를 추가하고 얼마나 멀리 가는지 확인한 다음 통과하지 못할 라인을 검사합니다.

예:

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

이것은 이 게시물의 오류와 함께 제 시험에서 실패한 것입니다.위와 같이 console.log가 두 개 있었습니다.첫 번째는 통과했지만 두 번째는 통과하지 못했습니다.그래서 온라인 constid = params.get('id')에 문제가 있다는 것을 깨닫고 수정했습니다.

이것이 누군가에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/45399079/angular-tests-failing-with-failed-to-execute-send-on-xmlhttprequest