Karma / Jasmine 테스트에서 "[object ErrorEvent] thrown"오류를 어떻게 디버깅합니까?

출력하는 몇 가지 실패한 테스트가 [object ErrorEvent] thrown있습니다. 문제가되는 코드를 정확히 찾아내는 데 도움이되는 내용이 콘솔에 표시되지 않습니다. 이를 추적하기 위해해야 ​​할 일이 있습니까?

[편집] : Karma v1.70, Jasmine v2.7.0을 실행 중입니다.

참고 : 테스트가 실행 된 후 DevTools 콘솔 을 열면 발생하는 정확한 오류를 찾을 수 있습니다 .

빠른 수정으로 소스 맵 없이 테스트 를 실행할 수 있습니다 .

CLI v6.0.8 이상
--source-map=false

CLI v6.0.x 초기 버전
--sourceMap=false

CLI v1.x
--sourcemaps=false

지름길 ng test -sm=false 도 작동 할 수 있습니다.

그것에 대해 열린 문제가 있습니다. https://github.com/angular/angular-cli/issues/7296 있습니다.

업데이트 : 나도 그 문제가 있었기 때문에 최신 cli로 마이그레이션하고 모든 패키지가 업데이트되었는지 확인하고 package.json완전히 다시 설치 node_modules했기 때문에 문제가 사라졌습니다.

sourcemap = false가 도움이되지 않으면 1) 테스트를 실행하는 브라우저를 열고 2) 디버그 버튼을 클릭합니다. 3) 콘솔을 엽니 다.

오류가있을 것입니다.

다음과 같이 터미널에서 테스트를 실행하여보다 설명적인 오류 메시지가 표시되면 시도해보십시오.

ng test -sm=false

테스트에서 다음을 대체 할 수 있습니다.

it('should...')

와

fit('should...') 

이제 fit 이 선행 된 테스트 만 실행됩니다. 테스트를 실행 한 후 브라우저를 열어 두려면 다음과 같이 테스트를 실행하십시오.

ng test -sm=false --single-run false

개인적으로이 오류가 두 번 발생했습니다. 둘 다 fixture.detectChanges ()를 호출 할 때만 트리거되었습니다.

첫 번째 시간, 내 .html 파일에보다 안전하게 문자열 보간을 사용하여 그것을 해결.

안전하지 않은 예 :

<p>{{user.firstName}}</p>

Safe (r) 예제 (물음표 참고) :

<p>{{user?.firstName}}</p>

속성 바인딩에도 동일하게 적용될 수 있습니다.

<p [innerText]="user?.firstName"></p>

두 번째로 .html 파일에서 DatePipe를 사용했지만이 파일을 사용한 모의 속성은 날짜가 아닙니다.

.html 파일 :

<p>{{startDate | date: 'dd-MM-yyyy'}}</p>

.ts (모의 데이터) 파일 ( 잘못된 ) :

let startDate = 'blablah';

.ts (모의 데이터) 파일 ( 올바름 ) :

let startDate = '2018-01-26';

이는 jasmine 프레임 워크가 ErrorEvent 유형을 처리 할 수 ​​없으므로 오류 메시지를 추출하지 않고 error.toString()대신 해당 개체를 호출 하기 때문입니다.

jasmine repo https://github.com/jasmine/jasmine/issues/1594에 문제를 제출했습니다.

수정되지 않는 한 node_modules 폴더에 설치된 jasmine 패키지를 임시로 패치 할 수 있습니다. 제 경우에는

node_modules/jasmine/node_modules/lib/jasmine-core/jasmine.js

그런 다음 ExceptionFormatter의 구현을이

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else {
    message += error.toString() + ' thrown';
}

이에

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else if (error.message) {
    message += error.message;
} else {
    message += error.toString() + ' thrown';
}

문제를 식별하는 데 도움이됩니다.

나 ngOnInit에게는 구성 요소 에서 약속을 해결하는 것과 관련이 있습니다. 내가 사용했다 async, fakeAsync그리고 진드기뿐만 아니라 비동기 서비스를 스텁spyOn

beforeEach(async(
  //... initialise testbed and component
))
beforeEach(fakeAsync(
  // ... setup mocks then call:
  component.ngOnInit()
  tick()
  fixture.detectChanges()
))

Angular-비동기 서비스 호출로 구성 요소를 단위 테스트하는 방법

요약 : 라우팅 테스트와 관련이있을 수 있습니다.

나도 받고 있어요 [object ErrorEvent] thrown. 한 시간 후 한 줄의 코드로 추적했습니다.

this.username = this.userService.getUser(this.route.snapshot.paramMap.get('id'))[0];

문제는 평가하려는 테스트 환경에 있습니다 this.route.snapshot.paramMap.get('id').

내가로 교체하는 경우 0, [object ErrorEvent] thrown사라집니다.

내 userService에는 다음과 같은 사용자가 있습니다.

public users = [ ["admin", "First name", "Surname", etc... ] ].

따라서이 0사용자를 index에서 가져옵니다 0.

그렇지 않으면 정상적으로 내 앱을 실행할 때 this.route.snapshot.paramMap.get('id') 때 사용자가 내 사용자 테이블에서 편집 할 사용자를 선택할 때 평가됩니다.

따라서 내 HTML에서 *ngFor="let user of users; index as i"루프를 실행하여 모든 사용자를 표시 한 다음 routerLink="/edit/{{i}}"각 사용자에 대한 편집 버튼을 클릭 할 수 있습니다. 클릭하면 예 http://localhost:4200/edit/0를 들어 앞서 언급 한 관리 사용자의 세부 정보를 편집 할 수 있습니다.

각 테스트 케이스 후 청소는 어떻습니까?

  afterEach(() => {
    TestBed.resetTestingModule();
  })

나는 같은 문제가 있었다. 이 오류가 발생하는 한 가지 방법은 템플릿에서 null 또는 정의되지 않은 항목에 액세스하려고 할 때입니다. 해당 변수에 대한 안전 점검이 있는지 확인하십시오.

예를 들어 구성 요소로드시 구성이 정의되지 않은 경우 [object : ErrorEvent]가 발생합니다.

template.html

<div *ngIf="config.options">
   .....
   ......
</div>

대신 이렇게

<div *ngIf="config?.options">
   .....
   ......
</div>

Karma 테스트 실행기에 Chrome 창이 열려있는 경우 개발자 도구를 열고 콘솔을 확인하면 도움이 될 수 있습니다. 저에게있어서 이것은 앱이 정의되지 않은 배열에서 Array.findIndex 메서드를 사용할 수 없다는 것을 알아내는 데 도움이되었습니다 (데이터 구조가 data [2018] [3] [28]과 같은 날짜 문자열로 구성 되었기 때문입니다. 나는 우연히 잘못된 날짜를 가리키고 있었지만 오류에서 멈추는 대신 테스트가 계속 실행되었습니다.

나에게 문제는 실수로 auth0-lock 라이브러리를 사용하는 테스트를 받았다는 것 입니다.

it내 구성 요소 사양 중 하나에 충분한 s를 추가 한 후 해당 파일 내의 파일 및 줄을 가리키는 사용 가능한 오류 메시지를 얻을 수 있었기 때문에 비동기 문제인 것처럼 보였습니다 ( paramMap.

ParamMap을 테스트 한 사양에서 방금 추가했습니다.

  describe('this test', () => {
    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });
  });

제대로 설정되지 않았거나 잘못 사용 된 레이스 또는 비동기 테스트가있을 수 있습니다. 디버그 케이스를 수정해야한다고 가정하고 명령 줄이 통과하는 것을 무시합니다. 오류 [object ErrorEvent] thrown가 간헐적으로 나타날 경우를 대비하여 Karma 테스트 실행기 (브라우저)를 계속 새로 고친 다음 비동기 조건을 올바르게 구현했는지 확인하십시오.

바라건대 이것은 작동합니다.

[개체 ErrorEvent] 발생

이 오류는 정의되지 않은 것이 있음을 나타냅니다. 내 경험에서 디버깅하는 가장 쉬운 방법은 다음과 같습니다.

it('should create', () => {
    console.log(component);
    // You can check in the browser log which property is undefined
    });

제 경우에는 테스트 실행 중에 객체 중 하나가 정의되지 않았기 때문에 문제가 서비스에있었습니다.

서비스 코드 샘플은 아래의 dom 액세스와 같았습니다.

  const elem = this.document.querySelector(element) as HTMLElement;
  elem.scrollIntoView({param1: ''});

이 서비스를 참조하는 사양이 ' [object ErrorEvent] thrown ' 오류와 함께 실패했습니다 .

나는 이것을 언급하는 모든 사양 내에서 내 서비스 객체를 조롱하고 문제가 해결되었습니다.

모의 서비스

class MockService {
serviceMethod(div) : void {
  testElement = document.querySelector('div') as HTMLElement;
  return testElement;
  } 
}

그리고 아래와 같이 공급자에서이 모의 서비스 객체를 사용합니다.

beforeEach(async(() => {

TestBed.configureTestingModule({
  declarations: [Component],
  providers: [
     { provide: Service, useClass: MockService },
    ],
})
  .compileComponents();
}));

다음과 같이 proxy.conf.json에 정의 된 내 응용 프로그램에서 프록시를 사용하고있었습니다.

'/api': { 'target': 'some path', 'changeOrigin': false }

Karma는이 프록시를 인식하지 못했기 때문에 API 엔드 포인트를 찾을 수 없다는 오류를 콘솔에 계속 표시했습니다. 그래서 Karma 문서를 살펴본 후, 내가 할 수있는 것은 proxy.conf.json의 동일한 객체로 karma.conf.js에 "proxies"속성을 추가하는 것임을 알았습니다.

proxies: { '/api': { 'target': 'some path', 'changeOrigin': false }}

콘솔의 오류가 사라지고 [object errorEvent]가 더 이상 발생하지 않았습니다.

결국 나를 위해 일한 것은 무엇입니까?

    TestBed.resetTestingModule();
  })