'XMLHttpRequest'에서 '보내기'를 실행하지 못해 각도 테스트 실패

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

그러나 간단한 "만들어야한다"테스트는이 중대한 오류를 발생시킨다.

NetworkError : 'XMLHttpRequest'에서 '보내기'를 실행하지 못했습니다 : 'ng : ///DynamicTestModule/module.ngfactory.js'를로드하지 못했습니다.

그래서 나는 발견 이 문제가 구성 요소가있다는 것을 시사 문제, @Input)_내가 지금처럼 내 테스트를 수정하는 경우, 그러나, 설정되지 않은 PARAMS를 :

  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

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

오류 메시지가 실제로 산만하고 실제 오류를 알리지 않았습니다. Running ng test --source=false은 올바른 오류와 줄을 가리키고 신속하게 해결하는 데 도움이되었습니다.

데이터를 모의하는 것이 불완전하거나 올바르지 않은 경우 여러 번 발생합니다.

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

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

또는

다음과 같이 component.spec.ts 파일을 수정하십시오 .

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

위에서 제안한대로 https://stackoverflow.com/a/45570571/7085047 내 문제는 내 문제였습니다 ngOnInit. 모의 swagger 생성 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-mockito를 사용하여 문제를 해결했습니다 : 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();
  }));

실제 테스트 오류를 ​​숨기는 Chrome과 관련이있을 수 있습니다. 테스트 영역은로드 할 수없는 모의 http 팩토리를 혼란스럽게 할 것이므로 그것이보고하는 오류입니다. 하위 오브젝트를 예상하고 정의되지 않은 오브젝트가있는 ngOnInit 영역 주위에 오류가있을 가능성이 높습니다.

오류의 맨 아래로 이동하려면 PhantomJS로 일시적으로 전환하십시오. PhantomJS는 이러한 초기화 오류가 덜 발생하는 것처럼 보이고 실제 오류를 알려줍니다. 초기화에 필요한 객체가 완료되지 않은 경우가 여러 번 발견되었습니다. IE :

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

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

객체를 수정하면 PhantomJS가 완료되고 Chrome도 다음 테스트로 넘어갈 수있었습니다.

그 외에는 Chrome에서 문제를 제거하는 솔루션을 보지 못했습니다. "오류가 발생할 때까지 코드를 제거하십시오"정책을 시도하고 채택하여 오류를 추적하십시오.

업데이트 : 이것은 지금 꽤 오래된 답변이므로 PhantomJS (EOL)를 더 이상 사용하지 않는 것이 좋습니다. 브라우저 테스트보고 기능이 훨씬 향상되었으며 Chrome에서 슬픔을 느끼면 Firefox를 사용해보십시오.이 테스트는 오늘날에도 테스트를 잘 수행합니다.

나는 또한이 오류가 있었는데, 진실은 말이 아닙니다.

내 서비스를 통한 HTTP 호출과 관련이 있습니다.

두 가지 방법으로 myService.ts를 사용합니다.

get();
getAll();

이 서비스를 조롱하고 있습니다 : mockMyService.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);
}

오류가 사라졌습니다 :)

나는 같은 문제에 직면하여 문제를 해결하기 위해 아래의 각 방법 전에 구성 요소에 대한 입력을 설정해야한다는 것을 알았습니다.

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

문제가 해결 될 것입니다.

필자의 경우 범인은 observable.timeout(x).retry(y)서비스 클래스 수준에서 반환 된 Observable 어딘가에 적용 된 다음 해당 서비스를 사용하는 구성 요소에서 다시 적용되었습니다.

angular-cli 1.4까지 브라우저에서 모든 것이 올바르게 작동했습니다. 그런 다음 Karma 테스트 중에 실패하기 시작했습니다 (그런 바보 같은 오류로). 솔루션은 물론 이러한 시간 초과 / 재시도 연산자를 정리하는 것이 었습니다.

나 에게이 메시지는 테스트에서 모의가 허위 일 때 나타납니다. 일반적으로 테스트 부트 스트랩에 mockService를 제공합니다. 모의가 불완전하거나 허위 인 경우, 각도는이 어리석은 오류를 반환합니다.

내 사건에 대한 자세한 정보는 여기

내가하고 싶은 일은 :

console.log () s, ngOnint ()의 행 다음에 행을 추가하고 얼마나 멀리 있는지 확인한 다음 통과하지 않는 행을 검사하십시오.

전의:

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.logs가 있습니다. 첫 번째는 thorugh를 통과했지만 두 번째는 thorugh를 통과하지 못했습니다. 그래서 문제가 온라인에 있다는 것을 깨달았습니다 const id = params.get ( 'id'); 나는 그것을 고쳤다.

이것이 누군가를 도울 수 있기를 바랍니다.