programing

카르마/재스민 테스트에서 "[object ErrorEvent] sloted" 오류를 디버깅하려면 어떻게 해야 합니까?

cafebook 2023. 4. 28. 21:31
반응형

카르마/재스민 테스트에서 "[object ErrorEvent] sloted" 오류를 디버깅하려면 어떻게 해야 합니까?

출력만 하는 몇 가지 실패한 테스트가 있습니다.[object ErrorEvent] thrown콘솔에 문제가 있는 코드를 식별하는 데 도움이 되는 내용이 없습니다.이것들을 추적하기 위해 제가 해야 할 일이 있나요?

[편집]: 저는 카르마 v1.70, 자스민 v2.7.0을 실행하고 있습니다.

참고: 테스트가 실행되면 DevTools Console을 여는 것만으로도 정확한 오류를 찾을 수 있습니다.

간단한 해결책으로 소스 맵 없이 테스트를 실행할 수 있습니다.

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...') 

이제 적합치 앞에 나오는 검정만 실행됩니다.테스트를 실행한 후 브라우저를 열어두려면 다음과 같이 테스트를 실행합니다.

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

저는 개인적으로 이 오류를 두 번 경험했습니다.둘 다 고정 장치를 호출할 때만 트리거되었습니다.detect Changes().

처음에는 .html 파일에서 문자열 보간법을 더 안전하게 사용하여 해결했습니다.

안전하지 않은 예:

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

안전(r) 예(질문 표시에 유의)

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

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

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

번째로, 저는 제 .html 파일에서 DatePipe를 사용하고 있었지만, 제가 사용한 모의 속성은 날짜가 아니었습니다.

.vmdk 파일:

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

.ts(데이터베이스) 파일(데이터베이스):

let startDate = 'blablah';

.ts (수정된 데이터) 파일(수정):

let startDate = '2018-01-26';

할 수 이벤트를 호출하기 때문입니다.error.toString()대신 그 물체에.

는 방금 자스민 레포 https://github.com/jasmine/jasmine/issues/1594 에 이슈를 제출했습니다.

수정되지 않는 한 node_modules 폴더에 설치된 자스민 패키지를 임시로 패치할 수 있습니다.나의 경우에는 그렇습니다.

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

그런 다음 예외 포맷터의 구현을 변경합니다.

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 - 비동기 서비스 호출로 테스트 구성 요소를 구성하는 방법

TL;DR: 라우팅 테스트와 관련이 있을 수 있습니다.

나는 받고 있습니다.[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이 .0.

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

제 그서제에 HTML는래,*ngFor="let user of users; index as i"가 표시됩니다.routerLink="/edit/{{i}}"따라서 각 사용자에 대한 편집 단추를 클릭할 수 있으며, 이 단추를 클릭하면 e.g.로 이동합니다. http://localhost:4200/edit/0위에서 언급한 관리 사용자의 세부 정보를 편집합니다.

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

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

제가 가입한 api에 대한 오류 처리기를 정의하지 않았기 때문에 이 문제가 발생했습니다.

방금 수정한 내용은 아래에 처리할 코드 블록(err)을 추가하는 것이었습니다.

it('reports an error to subscribers of api calls if not authenticated', (done) => {
    let obsDataFound = dataService.find(1);
    obsDataFound.subscribe((app) => {
        // not expecting this block to be called
        done();
    }, (err) => {
        // This is the err block that I added that solved the problem
        expect(true).toBeTruthy();
        done();
    });

    let testRequest = httpMock.expectOne({method: 'GET'});
    const mockErrorResponse = { status: 401, statusText: 'Unauthorized test status message' };
    testRequest.flush(appTest, mockErrorResponse);
});

저도 같은 문제가 있었습니다.이 오류가 발생하는 한 가지 방법은 템플릿에서 null이거나 정의되지 않은 모든 항목에 액세스하려고 할 때입니다.해당 변수에 대한 안전 검사를 수행해야 합니다.

예를 들어, [객체:구성 요소 로드에서 구성이 정의되지 않은 경우 ErrorEvent].

template.vmdk

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

대신 이 작업을 수행합니다.

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

도움이 될 수 있는 것은 카르마 테스트 실행자를 위해 크롬 창이 열려 있다면 개발자 도구를 열고 그곳에서 콘솔을 확인하는 것입니다.이것은 앱이 정의되지 않은 배열에서 Array.findIndex 메서드를 사용할 수 없다는 것을 알게 해주었습니다(데이터 구조가 데이터 [2018][3][28]과 같은 날짜 문자열로 구성되어 있어서 잘못된 날짜를 가리키게 되었기 때문입니다). 하지만 오류에서 멈추지 않고 테스트가 계속 실행되었습니다.

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

그것은 비동기식 문제로 보였습니다, 왜냐하면 제가 충분히 추가한 후에.it사양 중 에서 해당를 받을 수 .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가 간헐적으로 나타나는 경우 비동기 조건을 올바르게 구현했는지 확인하십시오.

이것이 효과가 있기를 바랍니다.

[object ErrorEvent]가 발생했습니다.

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

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

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

서비스 코드 샘플은 돔에 대한 아래 액세스와 같습니다.

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

서비스와 관련된 사양이 '[object ErrorEvent] sloted' 오류로 인해 실패했습니다.

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

모의 서비스

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

언급URL : https://stackoverflow.com/questions/45722256/how-do-i-debug-a-object-errorevent-thrown-error-in-my-karma-jasmine-tests

반응형